掌握 WebSocket，实现浏览器与服务器实时通信

2023-09-11 18:43:38





**正文** 

随着互联网技术的飞速发展，实时通信在各个领域都发挥着至关重要的作用。无论是多人在线游戏、在线聊天，还是金融交易系统，都需要借助实时通信技术来实现数据的高效传输。

WebSocket 是一种双向通信协议，它允许浏览器与服务器建立全双工通信，从而实现实时数据传输。与传统的 HTTP 请求不同，WebSocket 连接建立后，客户端和服务器可以同时向对方发送数据，而无需等待对方的请求。

WebSocket 的优势在于，它能够在浏览器和服务器之间建立持久连接，减少了数据传输的延迟，提高了通信的效率。同时，WebSocket 协议本身支持二进制数据传输，可以有效减少数据包的大小，进一步降低传输延迟。

接下来，我们将通过一个简单的示例来演示如何使用 WebSocket 在浏览器和服务器之间建立实时通信。

**服务器端代码** 

首先，我们需要在服务器端创建 WebSocket 服务器，我们可以使用 Python 的 WebSocket 库来实现。

```python
import asyncio
import websockets

async def main():
    async with websockets.serve(hello, "localhost", 8765):
        await asyncio.Future()  # Run forever

async def hello(websocket, path):
    name = await websocket.recv()
    print(f"Received {name}")

    greeting = f"Hello {name}!"

    await websocket.send(greeting)
    print(f"Sent {greeting}")

asyncio.run(main())

客户端代码

接下来，我们需要在浏览器中编写客户端代码来连接到 WebSocket 服务器。我们可以使用 JavaScript 的 WebSocket API 来实现。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="text" id="name">
  <button onclick="connect()">Connect</button>

  <div id="messages"></div>

  <script>
    var websocket;

    function connect() {
      var name = document.getElementById("name").value;

      websocket = new WebSocket("ws://localhost:8765");

      websocket.onopen = function() {
        websocket.send(name);
      };

      websocket.onmessage = function(event) {
        var message = event.data;

        var messages = document.getElementById("messages");
        messages.innerHTML += `<p>${message}</p>`;
      };
    }
  </script>
</body>
</html>