1、演示
2、实现流程
安装依赖
npm i ws服务端代码
const WebSocket = require('ws') // 创建一个 WebSocket 服务器，监听端口 3000 const wss = new WebSocket.Server({ port: 3000 }) // 监听连接事件 wss.on('connection', function connection(ws) { console.log('客户端已连接') // 监听客户端发送的消息 ws.on('message', function incoming(message) { console.log('收到消息', message.toString()) // 原样将消息发送回客户端 ws.send(message.toString()) }) // 监听连接关闭事件 ws.on('close', function () { console.log('客户端断开连接') }) })客户端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>WebSocket Demo</title> </head> <body> <h1>WebSocket Demo</h1> <input type="text" id="messageInput" placeholder="发送消息" /> <button onclick="sendMessage()">发送</button> <ul id="messages"></ul> <script> const socket = new WebSocket('ws://localhost:3000') // 监听连接打开事件 socket.addEventListener('open', function (event) { console.log('服务端已连接') }) // 监听接收消息事件 socket.addEventListener('message', function (event) { console.log('收到信息', event.data) displayMessage(event.data) }) // 将消息显示在页面上 function displayMessage(message) { const messages = document.getElementById('messages') const li = document.createElement('li') li.textContent = message messages.appendChild(li) } // 发送消息到服务器 function sendMessage() { const input = document.getElementById('messageInput') const message = input.value socket.send(message) input.value = '' } </script> </body> </html>
