在NodeJs中实现WebScoket

该博客展示了如何使用nodejs-websocket库在Node.js中创建WebSocket服务器,并监听8888端口,实现与客户端的连接。当连接建立时,服务器每两秒发送一次'好好好'的数据。客户端通过WebSocket连接到服务器,接收到消息后显示在页面上,同时支持打开和关闭连接的操作。

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

使用npm i nodejs-websocket -S安装包,-S安装在dependencies:

//node中
var ws = require("nodejs-websocket");
console.log("开始建立连接...")
  var server = ws.createServer((conn) => {
    conn.on("text", (str) => {
        console.log(str)
      setInterval(()=>{
        conn.sendText("好好好")
      },2000)    
    })
    conn.on("close", ()=>{
      console.log("关闭连接")
    });
    conn.on("error", () =>{    
    });
  }).listen(8888)

先引入nodejs-websocket
创建一个websocket连接,并监听端口8888
conn.on()为当有websocket连接到改server,就会执行,通过 conn.sendText()返回数据,我这里使用了定期器每隔两秒返回数据,然后显示在页面
当连接的websocket关闭之后,调用close和error方法,conn.on(“error”, () =>{ })没有意义,但必须需要,不然会报错而终止后面的socket连接

客户端实现


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="mess">正在连接...</div>
    <div>
        <button id='btn_close'>关闭连接</button>
        <button id='btn_open'>打开连接</button>
    </div>
    <script>
        var wsTest = null
 
        function connectSocket() {
            var ws = new WebSocket('ws://localhost:8888');
            ws.onopen = function (e) {
                setInterval(()=>{
                    ws.send("略略略")
                  },2000)    
                console.log("连接服务器成功");
                ws.send("连接成功");
            }
            ws.onclose = function (e) {
                console.log("服务器关闭");
            }
            ws.onmessage = function (e) {
                mess.innerHTML = "连接成功"
                var node = document.createElement('div')
                node.innerHTML = e.data
                document.body.appendChild(node);
            }
            return ws
        }
        var mess = document.getElementById("mess");
        if (window.WebSocket) {
            wsTest = connectSocket()
            document.getElementById('btn_open').onclick = function () {
                if (wsTest && wsTest.readyState === 1) {
                    wsTest.close() //关闭连接
                }
                wsTest = connectSocket()
            }
            document.getElementById('btn_close').onclick = function () {
                wsTest.close() //关闭连接
            }
        }
    </script>
</body>
</html>

先判断当前的浏览器是否支持websocket
创建WebSocket的实例并连接Socket,使用我们本机的回环地址:ws://localhost:8888
连接成功调用onopen方法
当有onmessage返回时候调用,做数据处理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值