引言
HTML5 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器和客户端之间进行实时、双向的数据交换。本文将详细介绍 HTML5 WebSocket 的基本概念、工作原理,并通过一个实战案例带你轻松上手。
HTML5 WebSocket 基本概念
什么是 WebSocket?
WebSocket 是一种网络通信协议,它允许在单个 TCP 连接上进行全双工通信。在 WebSocket 协议出现之前,客户端和服务器之间的通信通常是轮询式的,即客户端不断向服务器发送请求以获取更新,这导致了大量的网络资源浪费。
WebSocket 的出现改变了这种状况,它允许客户端和服务器之间建立持久的连接,并在任何时候都可以发送和接收数据。
WebSocket 与 HTTP 的区别
- 连接方式:WebSocket 需要通过 HTTP/HTTPS 协议进行握手,建立 WebSocket 连接。而 HTTP 连接在每次请求和响应后都会关闭。
- 数据传输:WebSocket 支持双向通信,即客户端和服务器都可以主动发送数据。而 HTTP 是单向的,客户端只能发送请求,服务器响应。
- 数据格式:WebSocket 可以传输任何格式的数据,而 HTTP 通常用于传输文本和二进制数据。
HTML5 WebSocket 工作原理
WebSocket 握手
WebSocket 连接的建立过程称为握手。握手过程如下:
- 客户端发送一个特殊的 HTTP 请求,请求中包含Upgrade头,将协议从HTTP切换到WebSocket。
- 服务器接收请求,检查请求中包含的Upgrade头,确认是否支持WebSocket。
- 如果服务器支持WebSocket,则返回一个响应,包含Upgrade头,将协议从HTTP切换到WebSocket。
- 客户端和服务器建立 WebSocket 连接。
WebSocket 消息传输
WebSocket 连接建立后,客户端和服务器可以发送和接收消息。消息传输过程如下:
- 客户端和服务器都可以发送文本或二进制数据。
- 消息发送时,需要在消息前加上一个特殊的帧(frame)。
- 接收方收到消息后,会解析帧,提取出消息内容。
实战案例:使用 JavaScript 和 Node.js 实现 WebSocket 服务器和客户端
1. 创建 WebSocket 服务器
以下是一个使用 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('received: %s', message);
});
ws.send('something from server');
});
2. 创建 WebSocket 客户端
以下是一个使用 JavaScript 实现的简单 WebSocket 客户端示例:
const ws = new WebSocket('ws://localhost:8080');
ws.on('open', function open() {
ws.send('Hello Server!');
});
ws.on('message', function incoming(data) {
console.log('received: %s', data);
});
3. 运行示例
- 将服务器代码保存为
server.js。 - 将客户端代码保存为
client.js。 - 在命令行中运行
node server.js启动服务器。 - 在浏览器中打开
client.html文件,并打开控制台查看输出。
总结
本文介绍了 HTML5 WebSocket 的基本概念、工作原理,并通过一个实战案例带你轻松上手。通过学习本文,你将能够快速掌握 WebSocket 的相关知识,并在实际项目中应用。
