在NodeJs中实现WebScoket

天天天155

已于 2023-02-15 15:59:39 修改

阅读量290

点赞数

文章标签： node.js

于 2022-11-14 14:07:40 首次发布

本文链接：https://blog.csdn.net/weixin_47625165/article/details/127846335

版权

使用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>