在互联网高速发展的今天，实时数据交互已经成为许多应用的核心需求。HTML5 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议，它允许服务器和客户端之间进行实时数据交换。本文将带你轻松入门 HTML5 WebSocket，并通过实战示例教你如何快速实现实时数据交互。
一、什么是 WebSocket？
WebSocket 是一种网络通信协议，它允许服务器和客户端之间建立一个持久的连接，使得双方可以随时发送和接收数据。相比传统的 HTTP 请求，WebSocket 具有以下特点：
全双工通信
：客户端和服务器可以同时发送和接收数据。
持久连接
：一旦建立连接，除非客户端或服务器主动关闭，否则连接将一直保持。
低延迟
：WebSocket 连接的建立和通信过程都相对较快，适合实时应用。
二、如何使用 WebSocket？
1. 创建 WebSocket 对象
在 JavaScript 中，可以使用
new WebSocket(url)
创建一个 WebSocket 对象。其中，
url
是 WebSocket 服务器的地址。
var ws = new WebSocket(‘ws://localhost:8080’);
2. 监听事件
WebSocket 对象提供了
onopen
、
onmessage
、
onerror
和
onclose
四个事件，用于处理连接建立、消息接收、错误和连接关闭等场景。
ws.onopen = function() {
console.log(‘连接已建立’);
ws.send(‘Hello, server!’);
};
ws.onmessage = function(event) {
console.log(‘收到消息：’ + event.data);
};
ws.onerror = function(error) {
console.log(‘发生错误：’ + error);
};
ws.onclose = function() {
console.log(‘连接已关闭’);
};
3. 发送和接收数据
可以使用
send()
方法向服务器发送数据，使用
onmessage
事件监听接收到的数据。
ws.send(‘Hello, server!’);
三、实战示例：实时聊天室
以下是一个简单的实时聊天室示例，演示了如何使用 WebSocket 实现客户端和服务器之间的实时数据交互。
1. 服务器端
使用 Node.js 和 ws 库搭建 WebSocket 服务器。
const WebSocket = require(‘ws’);
const wss = new WebSocket.Server({ port: 8080 });
wss.on(‘connection’, function connection(ws) {
ws.on(‘message’, function incoming(message) {
console.log(‘收到消息：’ + message);
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
2. 客户端
使用 JavaScript 创建 WebSocket 客户端，实现发送和接收消息。
var ws = new WebSocket(‘ws://localhost:8080’);
ws.onopen = function() {
console.log(‘连接已建立’);
ws.send(‘Hello, server!’);
};
ws.onmessage = function(event) {
console.log(‘收到消息：’ + event.data);
};
ws.onclose = function() {
console.log(‘连接已关闭’);
};
3. 浏览器端
创建一个简单的 HTML 页面，用于展示聊天室界面。
通过以上示例，你可以轻松入门 HTML5 WebSocket，并实现实时数据交互。在实际应用中，你可以根据需求对 WebSocket 进行扩展和优化，例如使用心跳包、消息序列化等。希望本文能帮助你更好地理解 WebSocket，并将其应用到实际项目中。