Node 通过WeSocket实现即时通讯_we'b'socket-优快云博客

本文详细介绍了使用WeSocket实现即时通讯的过程，包括前端HTML、JavaScript代码及后端Node.js两种实现方式：通过ws模块和nodejs-websocket模块。前端代码展示了如何连接服务器并发送消息，后端代码则演示了如何接收并响应这些消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WeSocket实现即时通讯

前端代码
后台node代码
- 第一种通过ws模块实现
- 第二种通过nodejs-websocket模块实现

前端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #kuang {
            text-align: center;
            margin-top: 200px;
        }

        #mess {
            text-align: center
        }

        .value {
            width: 200px;
            height: 200px;
            border: 1px solid;
            text-align: center;
            line-height: 200px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="mess">正在连接...</div>
    <div id="kuang">
        <span style="display: block">点击发送</span>
        <div class="value">1111111111111111111</div>
        <div class="value">2222222222222222222</div>
        <div class="value">3333333333333333333</div>
    </div>

    <script>
        var mess = document.getElementById("mess");
        if (window.WebSocket) {
            var ws = new WebSocket('ws://localhost:8080');

            ws.onopen = function (e) {
                console.log("连接服务器成功");
                ws.send("开始");  //向后台发送数据
            }
            ws.onclose = function (e) {
                console.log("服务器关闭");  //当链接关闭的时候触发
            }
            ws.onerror = function () {
                console.log("连接出错");  //错误情况触发
            }

            ws.onmessage = function (e) {  //后台返回消息的时候触发
                console.log(e.data);
                mess.innerHTML = "连接成功"
                document.querySelector("#kuang").onclick = function (e) {
                    if (e.target.nodeName.toLowerCase() == 'div') {
                        ws.send(e.target.innerHTML);
                    }
                }
            }
        }
    </script>
</body>
</html>

后台node代码

第一种通过ws模块实现

安装 ws cnpm install ws --save
参考文档
代码是

var WebSocket = require('ws');
console.log('开始建立连接...');
var wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {

    ws.on('message', function incoming(message) {
        ws.send(message);
        console.log("收到的信息为:" + message);
    });
    ws.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    ws.on("error", function (code, reason) {
        console.log("异常关闭")
    });
});
console.log("WebSocket建立完毕");

第二种通过nodejs-websocket模块实现

安装 nodejs-websocket cnpm install nodejs-websocket --save
代码是

var wss = require("nodejs-websocket");
console.log("开始建立连接...")

var server = wss.createServer(function(ws){
    ws.on("text", function (str) {
        console.log("收到的信息为:"+str)
        ws.send(str)
    })
    ws.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    ws.on("error", function (code, reason) {
        console.log("异常关闭")
    });
}).listen(8080)
console.log("WebSocket建立完毕")