为什么WebSocket这么容易学？五分钟教你掌握WebSocket

前端

2023-07-18 13:34:50

WebSocket：实时数据传输的通信协议

简介

互联网已成为我们日常生活不可或缺的一部分，但你知道它是如何运作的吗？WebSocket 是一种广泛用于实时数据传输的通信协议，它使你能够与服务器建立持久连接，在不发送请求的情况下接收和发送数据。

WebSocket 与 HTTP 请求的差异

与 HTTP 请求不同，WebSocket 是有状态的。这意味着服务器会保留有关客户端的信息，以便在以后的请求中使用。另一方面，HTTP 请求是无状态的，即每次请求都是独立的，服务器不会存储任何有关请求的信息。

WebSocket 的应用场景

WebSocket 可用于广泛的场景，包括：

实时聊天
在线游戏
股票交易
物联网设备通信

它非常适合需要实时通信的应用程序，因为它允许你在不需要不断发送请求的情况下实时接收数据。

学习 WebSocket

学习 WebSocket 非常简单，只需遵循以下步骤：

创建 WebSocket 服务器： 服务器负责处理客户端连接和数据传输。
在客户端建立 WebSocket 连接： 客户端连接到服务器并建立通信信道。
发送和接收数据： 客户端和服务器可以在连接信道上自由地交换数据。

代码示例

以下代码展示了一个简单的 WebSocket 服务器和客户端实现：

# 服务器代码
import asyncio

async def handle_connection(websocket):
    while True:
        message = await websocket.recv()
        print(f"Received message: {message}")
        await websocket.send(f"Echo: {message}")

async def main():
    async with asyncio.start_server(handle_connection, "127.0.0.1", 8000):
        await asyncio.Future()

asyncio.run(main())

<!-- 客户端代码 -->
<!DOCTYPE html>
<html>
<head>
    <script>
        var websocket = new WebSocket("ws://127.0.0.1:8000");

        websocket.onopen = function() {
            console.log("Connected to the WebSocket server");
        };

        websocket.onmessage = function(event) {
            console.log("Received message: " + event.data);
        };

        websocket.onclose = function() {
            console.log("Disconnected from the WebSocket server");
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            websocket.send(message);
        }
    </script>
</head>
<body>
    <input type="text" id="message" placeholder="Enter a message">
    <button onclick="sendMessage()">Send</button>
</body>
</html>