如皋市网站建设潍坊网站公司网络科技
1.WebSocket全双工通信协议
WebSocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议。让客户端和服务器间的数据交互变得简单，允许服务端向客户端主动推送数据。浏览器和服务器间只需要完成一次握手，两者间创建持久性的连接，并进行双向的数据传输。
WebSocket是在应用层实现的协议。握手过程中使用HTTP协议，握手成功升级为全双工通信通道，成功后WebSocket协议在应用层上定义消息格式和通信规则，通过传输层TCP协议上进行数据传输。
1.1 如何实现实时推送技术?
Ajax轮询：轮询分为（长轮询与短轮询）在特定的时间间隔，浏览器向服务器发送HTTP请求，服务器返回最新的数据给客户端。（缺点：需要不断向服务器发送请求，占用服务器资源和带宽）
WebSocket：js向服务器发出建立WebSocket连接请求，客户端与服务端通过TCP连接直接交换数据。
1.2 WebSocket主要的应用场景
- 实时通信：在线聊天，视频会议等
- 实时数据推送：新闻，体育赛事直播等，服务器可以主动向客户端推送更新数据
- 协同编辑：在线文档编辑的视线
- 在线游戏：需要实时推送更新游戏状态，提供低延迟的双向通信能力
具体的学习可以参考
HTML5 WebSocket | 菜鸟教程HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏..
https://www.runoob.com/html/html5-websocket.html
2.WebSocket相关属性事件与方法
获取WebSocket连接，通过send()方法向服务器发送数据，并通过onmessage事件接收服务器返回的数据。
2.1 创建WebSocket对象
var Socket = new WebSocket(url, [protocol] );
第一个参数url，指定连接的URL。第二个参数protocol，指定可接受的子协议。
2.2 WebSocket对象属性（使用创建的Socket对象）
| 属性 | 描述 |
|---|---|
| Socket.readyState | 只读属性 readyState 表示连接状态，可以是以下值：
|
| Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 |
2.3 WebSocket事件（使用创建的Socket对象）
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
| close | Socket.onclose | 连接关闭时触发 |
2.4 WebSocket方法（使用创建的Socket对象）
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
3. WebSocket（node.js作为服务器，js请求连接）
3.1 安装node.js与npm
根据电脑操作系统下载对应的版本。
3.2 初始化node.js项目
在新建项目文件目录下通过npm初始化项目。
npm init -ynpm-npm init与npm init -y区别与作用(初始化一个新的node.js项目)-CSDN博客文章浏览阅读43次。npm init与npm init -y区别与作用(初始化一个新的node.js项目)https://blog.csdn.net/2301_76671906/article/details/146195508?fromshare=blogdetail&sharetype=blogdetail&sharerId=146195508&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link
3.3 在node.js项目中安装ws库
npm install ws
ws是流行在node.js中实现WebSocket协议的库。提供对应的AP来创建WebSocket服务器和客户端，实现实时双向通信。
3.4 创建WebSocket服务器-serve.js
// 引入WebSocket模块
const WebSocket = require('ws');// 创建WebSocket服务器 监听8080端口
const wss = new WebSocket.Server({ port: 8080 });// 当有新的客户端连接时 触发connection事件
wss.on('connection', (ws) => {console.log('新的客户端已连接');// 收到客户端消息时 触发message事件ws.on('message', (message) => {console.log('收到消息: %s', message);// 向所有客户端广播消息wss.clients.forEach((client) => {// 判断客户端是否处于连接状态if (client.readyState === WebSocket.OPEN) {// 向处于打开状态的客户端广播接收到的消息client.send(message);}});});// 当客户端断开连接时 触发close事件ws.on('close', () => {console.log('客户端断开连接');});
});console.log('WebSocket服务器已启动，监听8080端口');
3.5 运行自定义接收传递服务器-serve.js
对应的node.js项目中运行
node server.js
3.6 前端html连接serve.js服务
<!DOCTYPE html>
<html>
<head><title>WebSocket测试</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><input v-model="inputMessage" @input="sendMessage" placeholder="输入消息"><p>收到的消息: {{ receivedMessage }}</p></div><script>// 创建WebSocket实例，连接到本地的8080端口const ws = new WebSocket('ws://localhost:8080');const app = new Vue({el: '#app',data: {inputMessage: '',receivedMessage: ''},methods: {sendMessage() {// 如果WebSocket连接已打开if (ws.readyState === WebSocket.OPEN) {// 发送输入框中的内容ws.send(this.inputMessage);}}}});// 当WebSocket连接成功时触发ws.onopen = function() {console.log('已连接到服务器');};// 当收到服务器发送的消息时触发ws.onmessage = function(event) {console.log('收到消息: ' + event.data);// 更新Vue实例中的receivedMessage变量app.receivedMessage = event.data;};// 当WebSocket连接关闭时触发ws.onclose = function() {console.log('连接已关闭');};
</script>
</body>
</html>