超越Ajax：用WebSocket构建高效全栈应用

前端

2023-08-26 04:38:14

从 Ajax 到 WebSocket：全栈开发中的前后端通信进化之旅

作为一名全栈开发者，你一定对 Ajax 并不陌生。它曾经是前后端通信的利器，但随着技术的飞速发展，Ajax 的局限性也逐渐暴露出来。

Ajax 的局限性：

延迟高、效率低： Ajax 通过 HTTP 请求与服务器交互，存在固有的延迟问题，降低了通信效率。
资源消耗大： 每个 Ajax 请求都需要建立和断开连接，造成资源浪费。
单向通信： Ajax 仅支持服务器向客户端的单向通信，无法实现实时交互。

拥抱 WebSocket：实时通信的王者

为了克服 Ajax 的缺陷，WebSocket 应运而生。它是一种双向全双工的通信协议，可在客户端和服务器之间建立持久连接，实现实时通信。

WebSocket 的优势：

实时性： WebSocket 可实现毫秒级的实时通信，非常适合构建聊天室、在线游戏等应用。
高效性： 采用二进制帧传输数据，大大减少数据传输量，提高通信效率。
低延迟： 大幅降低通信延迟，即使在网络环境较差的情况下，也能保持流畅的通信。
资源消耗小： WebSocket 连接轻量级，不会占用太多系统资源。

前后端通信技术的演进：

Ajax 的出现开启了前后端异步通信的新时代。随着 Fetch API 的诞生，通信方式更加简洁和高效。而 Long Polling 和 SSE（Server-Sent Events）等轮询技术，则实现了服务器向客户端的推送功能。但真正革新通信方式的，是 WebSocket。

实例演示：构建实时聊天应用

为了深入理解 WebSocket，让我们通过构建一个实时聊天应用来实际操作。

服务器端代码（Python）：

import asyncio
import websockets

async def handle_connection(websocket, path):
    while True:
        message = await websocket.recv()
        await websocket.send(message)

async def main():
    async with websockets.serve(handle_connection, "localhost", 8765):
        await asyncio.Future()

if __name__ == "__main__":
    asyncio.run(main())

客户端代码（JavaScript）：

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

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

socket.onmessage = function(event) {
  console.log("Received message from the server:", event.data);
};

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

socket.onerror = function(error) {
  console.log("Error:", error);
};

socket.send("Hello, world!");