HTML - WebSockets：初学者指南
你好，未来的网页开发者们！今天，我们将深入探索WebSockets的精彩世界。如果你之前从未听说过它们，不用担心——在本教程结束时，你将成为一个WebSocket大师！所以，拿起你最喜欢的饮料，舒服地坐好，让我们开始这段旅程。
WebSockets是什么？
在我们深入了解之前，让我们先了解一下WebSockets是什么，以及它们为什么这么酷。想象你正在和一个朋友聊天。在正常的电话通话中，你需要拨号，等待他们接听，说出你想说的，然后挂断。如果你想再次交谈，你需要重复整个过程。听起来很麻烦，对吧？
这就是传统的网页通信方式。浏览器发送一个请求，等待响应，然后关闭连接。而WebSockets就像一条始终保持开通的电话线，你和你的朋友可以随时交谈，而无需不断拨号和挂断。酷吧？
语法
现在，让我们看看如何在我们的HTML中使用WebSockets。语法出奇地简单：
<script>
var socket = new WebSocket('ws://example.com/socket');
</script>在这里，我们创建了一个新的WebSocket对象，并将其连接到位于'ws://example.com/socket'的服务器。'ws://'部分类似于'http://'，但专门用于WebSockets。还有一个安全版本，'wss://'，就像'https://'。
WebSocket的属性
WebSockets带有一些方便的属性，告诉我们关于当前连接状态的信息。让我们在表格中看看它们：
| 属性 | 描述 |
|---|---|
| readyState | 连接的当前状态 |
| bufferedAmount | 使用send()方法排队的字节数 |
| extensions | 服务器选择的扩展 |
| protocol | 服务器选择的子协议的名称 |
readyState属性特别有用。它可以是以下四个值之一：
- 0 (CONNECTING)：连接尚未打开。
- 1 (OPEN)：连接已打开，准备通信。
- 2 (CLOSING)：连接正在关闭中。
- 3 (CLOSED)：连接已关闭或无法打开。
WebSocket事件
WebSockets不仅仅是发送数据——它们还可以响应各种事件。这就像设置派对彩带，在特定事件发生时会弹出！以下是主要事件：
- onopen：当连接建立时触发。
- onmessage：当从服务器接收到数据时触发。
- onerror：当发生错误时触发。
- onclose：当连接关闭时触发。
让我们看看如何在代码中使用这些：
<script>
var socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) {
console.log('连接已建立！');
};
socket.onmessage = function(event) {
console.log('来自服务器的消息:', event.data);
};
socket.onerror = function(error) {
console.log('WebSocket错误:', error);
};
socket.onclose = function(event) {
console.log('连接已关闭。');
};
</script>在这个例子中，我们为每个事件设置了一个处理函数。当连接打开时，我们记录一条消息。当我们接收到消息时，我们记录它。如果发生错误，我们也记录它。而当连接关闭时，我们说再见！
WebSocket方法
现在我们知道如何监听事件，让我们看看如何使用我们的WebSocket来实际做事。以下是主要方法：
| 方法 | 描述 |
|---|---|
| send() | 向服务器发送数据 |
| close() | 关闭WebSocket连接 |
以下是如何使用这些方法的示例：
<script>
var socket = new WebSocket('ws://example.com/socket');
// 向服务器发送消息
socket.send('你好，服务器！');
// 关闭连接
socket.close();
</script>就这么简单！使用send()，我们可以向服务器发送任何我们想要的数据。当我们完成时，我们可以礼貌地使用close()关闭连接。
使用Python设置WebSocket服务器
现在，我知道我们在这里主要关注HTML，但我认为了解对话的两边是很重要的。所以，让我们快速了解一下如何使用Python设置一个简单的WebSocket服务器。如果你不熟悉Python，没关系——这里重要的是概念。
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
await websocket.send(f"回声: {message}")
start_server = websockets.serve(echo, "localhost", 8765)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()这个服务器简单地将接收到的任何消息返回，并在前面加上"回声: "。它运行在本地计算机上，端口为8765。
为服务器设置HTML客户端
现在我们有了服务器，让我们创建一个连接到它的HTML页面：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket测试</title>
</head>
<body>
<h1>WebSocket测试</h1>
<input type="text" id="messageInput" placeholder="输入消息">
<button onclick="sendMessage()">发送</button>
<div id="messages"></div>
<script>
var socket = new WebSocket('ws://localhost:8765');
socket.onopen = function(event) {
console.log('连接已建立！');
};
socket.onmessage = function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};
function sendMessage() {
var input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
</body>
</html>这个HTML页面创建了一个简单的界面，你可以在这里输入消息，发送到服务器，并看到回声响应。
就这样！我们已经涵盖了WebSockets的基础知识，从了解它们是什么，到设置服务器和创建客户端。记住，WebSockets是关于实时、双向通信的。它们非常适合聊天室、实时体育更新或任何需要即时数据交换的场景。
在你继续你的网页开发之旅时，你会发现WebSockets为你打开了一个全新的可能性的世界。所以，继续练习，继续尝试，最重要的是，继续享受乐趣！快乐编码！
Credits: Image by storyset