[JavaScript知识库] nodejs搭建websocket服务实现多页面通信

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> nodejs搭建websocket服务实现多页面通信 -> 正文阅读

[JavaScript知识库]nodejs搭建websocket服务实现多页面通信

? 介绍

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

用 nodejs 简单的搭建 websocket 服务实现多页面通信，效果如下：
请添加图片描述

? nodejs搭建websocket服务

新建文件夹 websocket
执行 npm init -y 初始化项目
执行 npm i ws 安装 ws 依赖
新建 server.js 文件
执行 node server.js 启动服务

// server.js
let WebSocketServer = require("ws").Server;
let wss = new WebSocketServer({ port: 3000 });
let clients = []; // 已连接的客户端

wss.on("connection", function(client) {
  console.log("一个客户端连接成功");
  if (clients.indexOf(client) === -1) {
    clients.push(client);
    client.on("message", function(msg) {
      console.log("收到客户端消息：" + msg);
      for (let c of clients) {
        // 发送给其它客户端
        if (c != client) c.send(msg);
      }
    });
  }
});

? 客户端发送消息页面

<body>
<input type="text" id="text">
<button id="send">发送</button>
<script>
    // 建立websocket连接
    let ws = new WebSocket("ws://localhost:3000")
    send.onclick = function () {
        let msg = document.getElementById("text").value?.trim()
        if (msg)
            ws.send(msg)
    }
</script>
</body>

? 客户端接收消息页面

<body>
收到了消息：<span id="text"></span>
<script>
    let ws = new WebSocket("ws://localhost:3000")
    ws.onopen = function () {
        ws.onmessage = function (e) {
            // 获取到的e.data为blob二进制文件，用fileReader转成文本
            let reader = new FileReader();
            reader.readAsText(e.data);
            reader.onload = function () {
                let content = reader.result + '';
                document.getElementById("text").innerHTML = content;
            };
        }
    }
</script>
</body>