1.WebSocket全双工通信协议
WebSocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯 的协议。让客户端和服务器间的数据交互变得简单，允许服务端向客户端主动推送数据。浏览器和服务器间只需要完成一次握手，两者间创建持久性的连接，并进行双向的数据传输。
WebSocket是在应用层实现的协议。握手过程中使用HTTP协议，握手成功升级为全双工通信通道，成功后WebSocket协议在应用层上定义消息格式和通信规则，通过传输层TCP协议上进行数据传输。
1.1 如何实现实时推送技术?
Ajax轮询：在特定的时间间隔，浏览器向服务器发送HTTP请求，服务器返回最新的数据给客户端。（缺点：需要不断向服务器发送请求，占用服务器资源和带宽）
**WebSocket：**js向服务器发出建立WebSocket连接请求，客户端与服务端通过TCP连接直接交换数据。
1.2 WebSocket主要的应用场景
- 实时通信：在线聊天，视频会议等
- 实时数据推送：新闻，体育赛事直播等，服务器可以主动向客户端推送更新数据
- 协同编辑：在线文档编辑的视线
- 在线游戏：需要实时推送更新游戏状态，提供低延迟的双向通信能力
具体的学习可以参考
https://www.runoob.com/html/html5-websocket.html2.WebSocket相关属性事件与方法
获取WebSocket连接，通过send()方法 向服务器发送数据，并通过onmessage事件接收服务器返回的数据。
2.1 创建WebSocket对象
html
var Socket = new WebSocket(url, [protocol] );第一个参数url，指定连接的URL。第二个参数protocol，指定可接受的子协议。
2.2 WebSocket对象属性（使用创建的Socket对象）
| 属性 | 描述 |
|---|---|
| Socket.readyState | 只读属性 readyState 表示连接状态，可以是以下值： * 0 - 表示连接尚未建立。 * 1 - 表示连接已建立，可以进行通信。 * 2 - 表示连接正在进行关闭。 * 3 - 表示连接已经关闭或者连接不能打开。 |
| 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初始化项目。
html
npm init -y3.3 在node.js项目中安装ws库
html
npm install wsws是流行在node.js中实现WebSocket协议的库。提供对应的AP来创建WebSocket服务器和客户端，实现实时双向通信。
3.4 创建WebSocket服务器-serve.js
javascript
// 引入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项目中运行
html
node server.js3.6 前端html连接serve.js服务
html
<!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>