简介
HTML5 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器和客户端之间进行实时、双向的数据交换,而不需要频繁地建立和关闭连接。本文将通过一个实战示例,帮助你轻松入门 HTML5 WebSocket。
WebSocket 基础
什么是 WebSocket?
WebSocket 是一种网络通信协议,它允许在单个 TCP 连接上进行全双工通信。在传统的 HTTP 通信中,客户端和服务器之间的通信是半双工的,即每次通信都需要建立一个新的连接。而 WebSocket 可以在建立连接后,双方可以随时发送和接收消息。
WebSocket 协议特点
- 全双工通信:客户端和服务器可以同时发送和接收消息。
- 持久连接:一旦建立连接,就保持连接状态,直到客户端或服务器关闭连接。
- 低延迟:由于是持久连接,因此消息的发送和接收延迟较低。
实战示例:WebSocket 在网页中的应用
1. 环境准备
首先,我们需要一个 WebSocket 服务器。这里我们使用 Python 的 websockets 库来创建一个简单的 WebSocket 服务器。
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
print(f"Received message: {message}")
await websocket.send(f"Echo: {message}")
start_server = websockets.serve(echo, "localhost", 6789)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
2. 客户端实现
接下来,我们使用 JavaScript 来创建一个简单的 WebSocket 客户端。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket 客户端</title>
</head>
<body>
<input type="text" id="message" placeholder="输入消息">
<button onclick="sendMessage()">发送</button>
<div id="messages"></div>
<script>
const socket = new WebSocket("ws://localhost:6789");
socket.onopen = function(event) {
console.log("WebSocket 连接已打开");
};
socket.onmessage = function(event) {
const messagesDiv = document.getElementById("messages");
const p = document.createElement("p");
p.textContent = event.data;
messagesDiv.appendChild(p);
};
function sendMessage() {
const messageInput = document.getElementById("message");
socket.send(messageInput.value);
messageInput.value = "";
}
</script>
</body>
</html>
3. 运行示例
将 WebSocket 服务器代码保存为 server.py,并运行它。然后,打开浏览器,访问包含上述 JavaScript 代码的 HTML 文件。在输入框中输入消息并点击发送按钮,可以看到消息被服务器回显,并在页面上显示。
总结
通过这个实战示例,你学会了如何使用 HTML5 WebSocket 创建一个简单的实时通信应用。WebSocket 在现代 Web 应用中具有广泛的应用场景,如在线游戏、实时聊天、股票交易等。希望这篇文章能帮助你轻松入门 WebSocket。
