原理
WebSocket是一种基于TCP协议的全双工通信协议，它可以在浏览器和服务器之间建立一个持久性的连接，使得客户端和服务器可以在同一个连接上进行双向数据传输。 WebSocket的连接原理如下：
- 客户端向服务器发送一个HTTP请求，请求中包含一个Upgrade头部，表示希望升级协议到WebSocket。
GET /webfin/websocket/ HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg==
Origin: http://localhost:8080
Sec-WebSocket-Version: 13
- 服务器收到请求后，需要进行协议升级，将HTTP协议升级为WebSocket协议。服务器会在响应中包含一个Upgrade头部和一个Sec-WebSocket-Accept头部，其中Sec-WebSocket-Accept头部的值是通过对客户端请求中的Sec-WebSocket-Key进行加密后得到的。
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: K7DJLdLooIwIG/MOpvWFB3y3FE8=
-
客户端收到服务器的响应后，也需要进行协议升级，将HTTP协议升级为WebSocket协议。客户端会检查服务器返回的Sec-WebSocket-Accept头部的值是否正确，以确保连接的安全性。
-
协议升级成功后，客户端和服务器之间建立了一个持久性的连接，双方可以在同一个连接上进行双向数据传输。 WebSocket的优点在于它可以实现实时通信，而且连接建立后可以保持持久性，无需频繁进行连接和断开操作。WebSocket通常用于在线聊天、实时游戏、实时数据推送等场景。
参考原理解释：blog.csdn.net/c_kite/arti…
示例
以下是一个使用Node.js和WebSocket实现实时聊天的简单例子：
// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('Client connected');
ws.on('message', function incoming(message) {
console.log('Received message:', message);
// 广播消息给所有客户端
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', function close() {
console.log('Client disconnected');
});
});
// client.html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Message">
<button onclick="send()">Send</button>
<ul id="messages"></ul>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function(event) {
const message = event.data;
const li = document.createElement('li');
li.textContent = message;
document.getElementById('messages').appendChild(li);
};
function send() {
const message = document.getElementById('message').value;
socket.send(message);
document.getElementById('message').value = '';
}
</script>
</body>
</html>
上述代码中，我们使用ws模块创建了一个WebSocket服务器，监听8080端口。当有客户端连接时，会触发connection事件，并在该事件处理函数中处理客户端发来的消息和断开连接事件。当收到消息时，我们会广播该消息给所有客户端。在客户端中，我们使用WebSocket对象连接服务器，并在onmessage事件中处理服务器发来的消息。当用户在页面上输入一条消息并点击发送时，我们会将该消息发送给服务器。这样就实现了一个简单的实时聊天应用。
