npm 安装 websocket 包

服务端代码

  1. 新建一个 js 文件，如： ws_server.js
  2. 引入 websocket 包，并且 new 一个 websocket server
    1
    2
    var WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 9999});
  3. 定义一个数组用来存放连接的用户
    1
    2
    // 连接池
    var clients = [];
  4. 监听 wss ，当有用户加入时，把该用户加入连接池，当某个用户发送消息当时候，循环连接池，把消息推送给每一位用户，当用户退出时，将其移出连接池
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    wss.on('connection', function (ws) {
        // 将该连接加入连接池
        clients.push(ws);
        ws.on('message', function (message) {
            console.log(message);
            // 广播消息
            clients.forEach(function (ws1) {
                if (ws1 !== ws) {
                    ws1.send(message);
                }
            })
        });

        ws.on('close', function (message) {
            // 连接关闭时，将其移出连接池
            clients = clients.filter(function (ws1) {
                return ws1 !== ws
            })
        });
    });
  5. 使用 node 启动该服务
    1
    node ws_server.js

客户端代码

  1. 新建一个 a.html 文件，代码如下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="text" id="text">
    <input type="button" onclick="sendMessage()" value="online">
    <div id="content"></div>

    <script>
        // x.x.x.x 改为服务器 IP）
        var ws = new WebSocket("ws://x.x.x.x:9999");

        ws.onopen = function (e) {
            console.log('Connection to server opened');
        };
        ws.onmessage = function (event) {
            console.log('Client received a message', event);
            document.getElementById('content').insertAdjacentHTML('beforeend', event.data + '<br>')
        };
        ws.onclose = function (e) {
            console.log('connection closed.');
        };

        function sendMessage() {
            document.getElementById('content').insertAdjacentHTML('beforeend', '粥粥：' + document.getElementById('text').value + '<br>');
            ws.send('粥粥：' + document.getElementById('text').value);
            document.getElementById('text').value = '';
        }
    </script>
    </body>
    </html>
  2. 新建一个 b.html 文件，代码同 a.html，此时当用户 a 打开 a.html，用户 b 打开 b.html 时，a 和 b 即可进行通信。