在NodeJs中实现WebScoket双工通信

最新推荐文章于 2022-11-14 14:07:40 发布

looper.zhuo

最新推荐文章于 2022-11-14 14:07:40 发布

阅读量357

点赞数

分类专栏： NPM使用文章标签： nodejs websocket js visual studio code

本文链接：https://blog.csdn.net/qq_40677590/article/details/107718957

版权

NPM使用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图

比较简陋，但是基本的功能能看到效果

准备工作：

本机需要有node环境
新建一个文件夹src，进入src 初始化一个package.josn。
使用npm i nodejs-websocket -S安装包，-S安装在dependencies：

"dependencies": {
    "loadsh": "0.0.4",
    "nodejs-websocket": "^1.7.2"
  },

服务端实现

var ws = require("nodejs-websocket");
console.log("开始建立连接...")
  var server = ws.createServer((conn) => {
    conn.on("text", (str) => {
      setInterval(()=>{
        conn.sendText("轮训的返回值："+new Date().toString())
      },2000)    
    })
    conn.on("close", ()=>{
      console.log("关闭连接")
    });
    conn.on("error", () =>{    
    });
  }).listen(8002)
console.log("WebSocket建立完毕")

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

以上就是服务端的websocket创建，启动起来等待连接

客户端实现

<!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://127.0.0.1:8002');
            ws.onopen = function (e) {
                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://127.0.0.1:8002
连接成功调用onopen方法
当有onmessage返回时候调用，做数据处理

以上就是客户端的websocket创建

启动顺序应该是先启动服务端，在启动客户端

looper.zhuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在NodeJs中实现WebScoket双工通信

效果图比较简陋，但是基本的功能能看到效果准备工作：本机需要有node环境新建一个文件夹src，进入src初始化一个package.josn。使用npm inodejs-websocket -S安装包，-S安装在dependencies："dependencies": { "loadsh": "0.0.4", "nodejs-websocket": "^1.7.2" }, 服务端实现var ws = require("no...
复制链接

扫一扫