WebScoket实现多个网页间通信
在通信任务中，常常需要多个用户同时修改某个网页数据的一个功能，经过查阅资料，本文实现了一种基于WebSocket的由多处用户网页向具体应用网页发送数据的功能，具体实现框图如下：
用户端在本地发送数据给服务端，服务端中转之后再发送到客户端。支持多个用户端同时发送数据。
用户端的实现
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>websocket send</title>
</head>
<body>
<p>输入框</p>
<textarea name="TLE数据" cols="50" rows="5"></textarea>
<button>发送请求</button>
<!-- 显示结果 -->
<p>------------------------------------------------------------------</p>
<p>------------------------------------------------------------------</p>
<p>对话框</p>
<div></div>
<script>
var input = document.querySelector('textarea')
var button = document.querySelector('button')
var div = document.querySelector('div')
var socket = new WebSocket('ws://localhost:3000/');
socket.addEventListener('open', function (){
div.innerHTML = '连接服务器成功'
// console.log("测试链接成功")
})
// 发送数据
button.addEventListener('click', function(){
var value = input.value
socket.send(value)
var dv = document.createElement("div")
dv.innerHTML = "向服务器发送数据:" + value
div.appendChild(dv)
})
// 接收数据
socket.addEventListener('message', function(a){
console.log(a.data)
})
</script>
</body>
</html>
其中：
连接服务器
var socket = new WebSocket('ws://localhost:3000/');
表示创建了一个服务器对象 socket 参数 ws://localhost:3000/ 表示服务器地址， 指使用 http 创建的服务器，localhost:3000/ 是本地创建的端口号为3000的服务器，后文中会有搭建教程。
发送数据
// 发送数据
button.addEventListener('click', function(){
var value = input.value
socket.send(value)
var dv = document.createElement("div")
dv.innerHTML = "向服务器发送数据:" + value
div.appendChild(dv)
})
创建了一个 dv 变量，实现了历史日志的显示。
接受数据
// 接收数据
socket.addEventListener('message', function(a){
console.log(a.data)
})
接受数据功能，这里知识做一个测试，不会使用。
接下来就是重点了！！！
服务器端的创建（使用nodejs）
安装nodejs
从以下链接下载nodejs(适用于windows64位系统)
https://npmmirror.com/mirrors/node/v16.15.0/node-v16.15.0-x64.msi
其他下载地址：
http://nodejs.cn/download/
打开msi包一步步安装，建议更换安装路径为非C盘，Custom Setup界面选择默认第一个就行
Tools for Native Modules 不要勾选安装工具，继续Next：
安装完成后打开终端，输入以下两行命令检查是否安装好 node 和 npm
node -v
npm -v
安装成功的显示：
配置NodeJs环境
进入NodeJS的安装目录，创建文件夹 node_cache：
在终端分别输入以下命令：
修改模块安装路径：
npm config set prefix "<你的安装目录>"
修改缓存路径
npm config set cache "<安装目录下的node_cache文件夹>"
最后，再检查一下是否配置成功
配置环境变量
一、打开环境变量，在 用户变量 中删除NodeJs的默认配置路径:
二、新建下系统变量 变量名为 NODE_PATH 变量值为 安装目录下的node_modules 文件夹地址。
更换npm源
终端输入:
npm config set registry https://registry.npm.taobao.org
查看更换好的源：
npm config get registry
此时NodeJs环境已经配置好了。
配置服务端
以管理员方式打开VsCode（否则后续使用npm安装包的时候权限不够）
打开终端，输入：
npm add nodejs-websocket
安装nodejs-websocket包。
安装成功后就可以搭建我们的服务端啦！
服务端代码
const ws = require('nodejs-websocket')
const PORT = 3000;
let count = 0
let id = 0
// 每个连接到服务器的用户,都会有一个connect
const server = ws.createServer(connect => {
id++
console.log("有用户连接上来了，设置为：用户" + id + "\n" + "当前用户数为：" + get_user_nums())
connect.UserName = "用户" + id
// 接收用户信息,当接收到信息的时候,告诉所有用户(server.connections)发送的内容是什么
connect.on('text', data => {
console.log("接收到了" + connect.UserName + "的数据：", data)
broadcast(data)
})
function get_user_nums(){
return server.connections.length
}
// 广播,给所有用户发消息
function broadcast(msg){
server.connections.forEach(item => {
item.send(msg)
})
}
// 有用户离开时,也要告诉所有的用户
connect.on('close', () => {
console.log(connect.UserName + "连接断开")
})
connect.on('error', () => {
console.log(connect.UserName + "连接异常")
})
})
server.listen(PORT, () => {
console.log("websocket服务启动成功，监听了端口"+PORT)
})
代码中我们定义的端口号为3000，并一直监听这个端口，这与我们之前的用户端端口号刚好吻合了。
broadcast函数是通过广播的方式向每一个连接的用户端和客户端发送消息，也就实现了 data 的共享。
其余的代码都是加了一些交互的消息，方便我们使用过程中观察信息。
另外，服务端还必须有对 close 事件和 error 事件的处理，否则当我们关闭用户端或者客户端的时候服务端会报错。
客户端创建
客户端只负责接收消息，创建比较简单，连接服务端并且接受消息即可，代码如下：
<script>
let socket = new WebSocket('ws://localhost:3000/');
socket.addEventListener('open', function (){
console.log("Cesium连接成功")
})
socket.addEventListener('message', function(a){
console.log(a.data)
})
</script>
这段代码是接收到消息然后将消息打印到控制台，只需要将它嵌套进去你的 html 网页即可。
代码
我做了一个测试代码，地址为：
https://github.com/FLBa9762/Websocket-based-Multi-web-communication.git
使用方法：
server.js是服务端，使用时在Vscode终端使用命令：
node server.js
打开服务器。
随后打开 send.html 发送端和 receiver.html 接收端开始测试。
扫一扫
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
