一、服务端安装ws库

npm install ws

创建服务端

const WebSocket = require("ws");
const WebSocketServer = WebSocket.Server;

// 创建 WebSocket 服务器 监听在 3000 端口
const wss = new WebSocketServer({ port: 3000 });
//收集人员
let sockets = [];
//如果有WebSocket请求接入，wss对象可以响应connection事件来处理这个WebSocket：
wss.on("connection", (ws, req) => {
  //拿id
  let id = req?.url.split("=")[1];
  console.log("连接了", id);
  //加入的人员
  sockets.push({ ws, id });
  // 接收客户端信息并把信息返回发送
  ws.on("message", (message) => {
    sockets.forEach((item) => {
      item.ws.send(
        JSON.stringify({
          id: id,
          message: message.toString(),
        })
      );
    });
  });
});

二、创建Web页面

<!DOCTYPE html>
<html>

<head>
    <title>websocket</title>
    <style>
        p {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <input type="text" id="message">
    <div id="sendmessage">点击发送</div>
    <div id="messagebox" style="width: 1000px;height: 1000px;background-color: #39c5bb;"></div>
    <script type="text/javascript">
        let myid = uuid()
        let text
        const messagebox = document.getElementById('messagebox')
        // 浏览器提供 WebSocket 对象
        var ws = new WebSocket('ws://localhost:3000' + `?id=${myid}`);

        // 发送
        document.getElementById('sendmessage').addEventListener('click', () => {
            const message = document.getElementById('message').value
            ws.send(message);
            document.getElementById('message').value = ''
        })

        // 接收
        ws.onmessage = function (mes) {
            sendmessage(mes)
        }
        const sendmessage = function (mes) {
            let data = JSON.parse(mes.data)
            const div = document.createElement('div')
            const p1 = document.createElement('p')
            p1.textContent = 'ID为（' + data.id + '）的用户' + new Date()
            const p2 = document.createElement('p')
            p2.textContent = data.message
            console.log(data)
            div.textContent = text
            if (data.id == myid) {
                div.style.textAlign = 'right'
            }
            messagebox.appendChild(div)
            div.appendChild(p1)
            div.appendChild(p2)
            text = null
        }
        //uuid生成
        function uuid() {
            var temp_url = URL.createObjectURL(new Blob());
            var uuid = temp_url.toString();
            URL.revokeObjectURL(temp_url);
            return uuid.substr(uuid.lastIndexOf("/") + 1);
        }
    </script>

</body>

</html>

websocket（入门）简单的WEB（前后端）websocket广播交流

一、服务端安装ws库

创建服务端

二、创建Web页面

效果图