当使用 WebSocket 进行实时通信时,通常涉及以下几个主要步骤:
-
建立连接:
- 在客户端,通过 JavaScript 中的
WebSocket
对象创建一个 WebSocket 实例,并指定要连接的 WebSocket 服务器的 URL。 - 在服务器端,需要创建 WebSocket 服务监听指定的端口,并等待客户端的连接请求。
- 在客户端,通过 JavaScript 中的
-
连接事件处理:
- 在客户端,可以监听 WebSocket 的
onopen
事件,当连接建立成功时执行相应的操作。 - 在服务器端,通过监听
connection
事件处理客户端的连接请求,并执行相应的操作。
- 在客户端,可以监听 WebSocket 的
-
消息传输:
- 客户端和服务器端都可以通过
send()
方法向对方发送消息。 - 在客户端,可以监听 WebSocket 的
onmessage
事件来接收服务器发送的消息。 - 在服务器端,可以监听客户端发送的消息,并根据需要进行处理和回复。
- 客户端和服务器端都可以通过
-
错误处理和连接关闭:
- 客户端和服务器端都可以监听 WebSocket 的
onerror
事件来处理连接错误。 - 客户端和服务器端可以监听 WebSocket 的
onclose
事件来处理连接关闭的情况。
- 客户端和服务器端都可以监听 WebSocket 的
-
安全性考虑:
- 当使用 WebSocket 进行通信时,需要特别注意安全性,避免出现跨站脚本攻击(XSS)等安全漏洞。可以通过一些安全措施来保护 WebSocket 连接的安全性。
服务器端代码(Node.js):
// 引入 WebSocket 模块
const WebSocket = require('ws');
// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });
// 监听客户端连接请求
wss.on('connection', function connection(ws, req) {
// 打印客户端连接信息
console.log(`客户端 ${req.socket.remoteAddress} 已连接`);
// 监听客户端发送的消息
ws.on('message', function incoming(message) {
console.log(`接收到客户端[${req.socket.remoteAddress}]的消息:${message}`);
// 向客户端回复消息
ws.send(`服务器已接收到你的消息:${message}`);
});
// 监听客户端连接关闭事件
ws.on('close', function() {
console.log(`客户端 ${req.socket.remoteAddress} 已断开连接`);
});
});
以上代码使用 Node.js 的 ws
模块创建了一个 WebSocket 服务器,监听端口号为 8080,当客户端连接成功后,打印客户端连接信息,并监听客户端发送的消息和连接关闭事件。当接收到客户端发送的消息时,将消息打印在控制台,并回复一条消息给客户端。
客户端代码(HTML + JavaScript):
<!-- 客户端代码 -->
<!DOCTYPE html>
<html>
<head>
<title>WebSocket 示例</title>
</head>
<body>
<input type="text" id="input">
<button type="button" onclick="sendMessage()">发送消息</button>
<div id="output"></div>
<script>
var ws = new WebSocket("ws://localhost:8080");
// 连接成功时的回调函数
ws.onopen = function(event) {
console.log("WebSocket 已连接");
};
// 接收到消息时的回调函数
ws.onmessage = function(event) {
console.log("接收到消息:" + event.data);
var output = document.getElementById("output");
output.innerHTML += "<p>收到消息:" + event.data + "</p>";
};
// 连接关闭时的回调函数
ws.onclose = function(event) {
console.log("WebSocket 已关闭");
};
// 发送消息
function sendMessage() {
var input = document.getElementById("input");
var output = document.getElementById("output");
var message = input.value;
ws.send(message);
output.innerHTML += "<p>发送消息:" + message + "</p>";
input.value = "";
}
</script>
</body>
</html>
以上代码创建了一个包含文本输入框和按钮的 HTML 页面,当用户点击按钮时,将文本框中的内容作为消息发送给 WebSocket 服务器,并将消息显示在输出区域中。同时,客户端还监听了 WebSocket 的连接成功、接收到消息和连接关闭事件,分别在控制台和页面输出相关信息。