HTML5 WebSocket

HTML5 WebSocket 中文讲解（2025年）

WebSocket 是 HTML5 提供的一种全双工通信协议，通过单个 TCP 连接实现客户端与服务器之间的实时、低延迟通信。相比传统的 HTTP 轮询，WebSocket 支持持久连接，适合实时应用（如聊天、游戏、实时数据推送）。2025年，WebSocket 仍是 Web 开发中的核心技术，广泛用于现代 Web 应用、Kotlin Multiplatform（KMP）项目的 WebView 集成以及物联网（IoT）设备通信。本教程详细讲解 WebSocket 的语法、用法和实践，基于 MDN、W3Schools 和 CSDN，适合初学者和开发者。建议用浏览器开发者工具（F12）或在线 IDE（如 CodePen）练习。

一、WebSocket 概览（必知）

定义：WebSocket 是一种基于 TCP 的协议（ws:// 或 wss://），允许客户端和服务器双向发送数据。
核心用途：
实时通信：如聊天室、在线游戏。
数据推送：如股票价格、通知。
跨平台集成：如 KMP 中的 WebView 与后端交互。
特点：
全双工：客户端和服务器可同时发送和接收数据。
低开销：相比 HTTP，头部更小，效率更高。
跨平台：支持浏览器、Node.js 和嵌入式设备。
2025年趋势：
WebSocket 在 WebAssembly 和 KMP 项目中用于高效数据传输。
结合 WebRTC 和 Server-Sent Events（SSE）实现复杂实时应用。
安全性增强：wss://（加密 WebSocket）成为标配。

二、核心语法与用法（必会）

以下按客户端（JavaScript）和服务器端（Node.js 示例）讲解，包含代码，可在浏览器或本地运行。

1. 客户端（JavaScript）

创建 WebSocket 连接：

  const ws = new WebSocket("ws://example.com:8080");

事件监听：
onopen：连接建立时触发。
onmessage：接收消息时触发。
onclose：连接关闭时触发。
onerror：错误发生时触发。

  ws.onopen = () => console.log("Connected to server");
  ws.onmessage = (event) => console.log("Received:", event.data);
  ws.onclose = () => console.log("Connection closed");
  ws.onerror = (error) => console.error("Error:", error);

发送消息：

  ws.send("Hello, Server!");

关闭连接：

  ws.close();

完整示例（客户端）：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <input id="message" type="text" placeholder="Enter message">
    <button onclick="sendMessage()">Send</button>
    <div id="output"></div>
    <script>
        const ws = new WebSocket("ws://localhost:8080");
        const output = document.getElementById("output");

        ws.onopen = () => output.innerHTML += "<p>Connected!</p>";
        ws.onmessage = (event) => output.innerHTML += `<p>Received: ${event.data}</p>`;
        ws.onclose = () => output.innerHTML += "<p>Disconnected!</p>";
        ws.onerror = (error) => output.innerHTML += `<p>Error: ${error}</p>`;

        function sendMessage() {
            const input = document.getElementById("message");
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(input.value);
                output.innerHTML += `<p>Sent: ${input.value}</p>`;
                input.value = "";
            }
        }
    </script>
</body>
</html>

功能：连接 WebSocket 服务器，发送消息并显示接收内容。

2. 服务器端（Node.js 示例）

使用 ws 库：

  npm install ws

服务器代码：

const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 8080 });

server.on("connection", (ws) => {
    console.log("Client connected");

    ws.on("message", (message) => {
        console.log(`Received: ${message}`);
        ws.send(`Server: ${message}`); // 回显消息
    });

    ws.on("close", () => console.log("Client disconnected"));

    ws.send("Welcome to the server!");
});

console.log("WebSocket server running on ws://localhost:8080");

功能：启动 WebSocket 服务器，接收客户端消息并回显。

3. WebSocket 状态

readyState 属性：
0（CONNECTING）：连接中。
1（OPEN）：连接已建立。
2（CLOSING）：关闭中。
3（CLOSED）：已关闭。

  if (ws.readyState === WebSocket.OPEN) {
      ws.send("Ready!");
  }

4. 使用 `wss://`（安全连接）

配置 HTTPS 服务器（需 SSL 证书）：

  const https = require("https");
  const fs = require("fs");
  const WebSocket = require("ws");

  const server = https.createServer({
      cert: fs.readFileSync("cert.pem"),
      key: fs.readFileSync("key.pem")
  });
  const wss = new WebSocket.Server({ server });
  server.listen(8080);

客户端连接：

  const ws = new WebSocket("wss://example.com:8080");

三、实践示例（综合应用）

实时聊天室：

客户端（扩展前述 HTML）：

<!DOCTYPE html>
<html>
<head>
    <style>
        #output { border: 1px solid #ccc; padding: 10px; height: 200px; overflow-y: scroll; }
        #message { width: 200px; }
    </style>
</head>
<body>
    <h1>Chat Room</h1>
    <input id="message" type="text" placeholder="Type a message">
    <button onclick="sendMessage()">Send</button>
    <div id="output"></div>
    <script>
        const ws = new WebSocket("ws://localhost:8080");
        const output = document.getElementById("output");

        ws.onopen = () => output.innerHTML += "<p>Connected to chat!</p>";
        ws.onmessage = (event) => output.innerHTML += `<p>${event.data}</p>`;
        ws.onclose = () => output.innerHTML += "<p>Chat closed</p>";

        function sendMessage() {
            const input = document.getElementById("message");
            if (ws.readyState === WebSocket.OPEN && input.value) {
                ws.send(input.value);
                output.innerHTML += `<p>You: ${input.value}</p>`;
                input.value = "";
            }
        }
    </script>
</body>
</html>

服务器（广播消息）：

const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 8080 });

server.on("connection", (ws) => {
    ws.send("Welcome to the chat room!");

    ws.on("message", (message) => {
        const msg = `User: ${message}`;
        server.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(msg);
            }
        });
    });
});

功能：多客户端聊天室，消息广播给所有连接用户。

KMP 集成（WebView + WebSocket）：

import android.os.Bundle
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val webView: WebView = findViewById(R.id.webView)
        webView.settings.javaScriptEnabled = true
        webView.loadData("""
            <html>
            <body>
                <h1>WebSocket Data</h1>
                <div id="output"></div>
                <script>
                    const ws = new WebSocket("ws://localhost:8080");
                    ws.onmessage = (event) => {
                        document.getElementById("output").innerHTML += `<p>${event.data}</p>`;
                    };
                </script>
            </body>
            </html>
        """, "text/html", "UTF-8")
    }
}

布局（res/layout/activity_main.xml）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

功能：在 Android WebView 中使用 WebSocket 显示实时数据。

四、注意事项与最佳实践

连接管理：

检查 readyState 避免在非 OPEN 状态发送消息：
javascript if (ws.readyState === WebSocket.OPEN) ws.send(data);
自动重连机制：
javascript function reconnect() { setTimeout(() => new WebSocket("ws://localhost:8080"), 5000); } ws.onclose = reconnect;

安全性：

使用 wss:// 加密连接，避免数据泄露。
验证服务器身份（SSL 证书）。

性能优化：

限制消息频率，避免服务器过载：
javascript let lastSent = 0; function sendThrottled(data) { const now = Date.now(); if (now - lastSent > 1000) { ws.send(data); lastSent = now; } }
使用二进制数据（ArrayBuffer）传输大文件：
javascript ws.binaryType = "arraybuffer"; ws.send(new ArrayBuffer(1024));

跨平台：

在 KMP 项目中，WebSocket 可通过 WebView 或 C++ 模块实现：
cpp // C++ WebSocket 客户端（使用库如 libwebsocket）

2025年趋势：

WebAssembly：WebSocket 与 WASM 结合，提升前端性能。
IoT：WebSocket 用于设备实时通信。
AI 辅助：VS Code 的 Copilot 可生成 WebSocket 代码。

五、学习建议

练习：用 Node.js 和浏览器实现简单聊天室，测试发送/接收消息。
资源：
MDN：https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
W3Schools：https://www.w3schools.com/js/js_api_websockets.asp
CSDN：搜索“HTML5 WebSocket”。
时间：2-3 天掌握基本用法，1 周熟悉服务器和 KMP 集成。
实践：开发实时应用（如聊天、数据仪表盘）。

六、总结

HTML5 WebSocket 必知全双工通信、事件驱动和 ws:///wss://，必会客户端连接、消息处理和服务器搭建。2025年，WebSocket 在实时 Web 应用和 KMP 项目中不可或缺，结合 WASM 和 wss:// 更安全高效。相比 HTTP 轮询，WebSocket 低延迟且开销小。

如果需要具体场景代码（如复杂聊天室或 KMP 示例）或有问题，告诉我，我可以提供更详细解答！

HTML5 WebSocket 中文讲解（2025年）

一、WebSocket 概览（必知）

二、核心语法与用法（必会）

1. 客户端（JavaScript）

2. 服务器端（Node.js 示例）

3. WebSocket 状态

4. 使用 `wss://`（安全连接）

三、实践示例（综合应用）

四、注意事项与最佳实践

五、学习建议

六、总结

localstorage 必知必会

WebUploader：前端文件上传解决方案实战指南

HTML5 Canvas

HTML5 表单属性

HTML5 SVG

HTML5 拖放（Drag 和 Drop）

发表回复取消回复

HTML5 WebSocket 中文讲解（2025年）

一、WebSocket 概览（必知）

二、核心语法与用法（必会）

1. 客户端（JavaScript）

2. 服务器端（Node.js 示例）

3. WebSocket 状态

4. 使用 wss://（安全连接）

三、实践示例（综合应用）

四、注意事项与最佳实践

五、学习建议

六、总结

类似文章

发表回复 取消回复

4. 使用 `wss://`（安全连接）

发表回复取消回复