HTML5 WebSocket

2025-11-30 12:51:58 分类：html5 热度：804 评论： 0

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.***: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("Wel***e 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.***:8080");
三、实践示例（综合应用）
  1. 实时聊天室：
    • 客户端（扩展前述 HTML）：
<!DOCTYPE html>
<html>
<head>
    <style>
        #output { border: 1px solid #***c; 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>
- **服务器**（广播消息）： ```javascript const WebSocket = require("ws"); const server = new WebSocket.Server({ port: 8080 });

server.on(“connection”, (ws) => {
ws.send(“Wel***e to the chat room!”);

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

});

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

2. **KMP 集成（WebView + WebSocket）**：
<xaiArtifact artifact_id="432bedb5-7586-45e6-a023-eedbf349f29f" artifact_version_id="44b3f58a-f223-4458-a698-5158ed84bbc9" title="MainActivity.kt" contentType="text/kotlin">
```kotlin
import android.os.Bundle
import android.webkit.WebView
import androidx.app***pat.app.App***patActivity
class MainActivity : App***patActivity() {
    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`）**： ```xml ``` **功能**：在 Android WebView 中使用 WebSocket 显示实时数据。
四、注意事项与最佳实践
  1. 连接管理：
    • 检查 readyState 避免在非 OPEN 状态发送消息：
      if (ws.readyState === WebSocket.OPEN) ws.send(data);
    • 自动重连机制：
      function reconnect() {
    setTimeout(() => new WebSocket("ws://localhost:8080"), 5000);
}
ws.onclose = reconnect;
  2. 安全性：
    • 使用 wss:// 加密连接，避免数据泄露。
    • 验证服务器身份（SSL 证书）。
  3. 性能优化：
    • 限制消息频率，避免服务器过载：
      let lastSent = 0;
function sendThrottled(data) {
    const now = Date.now();
    if (now - lastSent > 1000) {
        ws.send(data);
        lastSent = now;
    }
}
    • 使用二进制数据（ArrayBuffer）传输大文件：
      ws.binaryType = "arraybuffer";
ws.send(new ArrayBuffer(1024));
  4. 跨平台：
    • 在 KMP 项目中，WebSocket 可通过 WebView 或 C++ 模块实现：
      // C++ WebSocket 客户端（使用库如 libwebsocket）
  5. 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.***/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 示例）或有问题，告诉我，我可以提供更详细解答！

转载请说明出处内容投诉
CSS教程网 » HTML5 WebSocket
芋头ᵒᵏᵎ

芋头ᵒᵏᵎ

分享到：

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买