基于WebSocket如何实现网页聊天？（1对1、1 对多聊天）.md

基于 WebSocket 实现网页聊天可以实现实时通讯，不需要频繁刷新页面，使用起来非常方便。下面介绍如何使用 WebSocket 实现网页聊天。

## 1. 建立 WebSocket 连接

建立 WebSocket 连接需要在前端和后端实现。在前端我们可以使用 JavaScript 中的 WebSocket 对象，后端可以使用 WebSocket 库。

前端代码：

var socket = new WebSocket("ws://localhost:8080/chat");

socket.onopen = function(event) {
  console.log("WebSocket connected");
};

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

socket.onclose = function(event) {
  console.log("WebSocket closed");
};

socket.onerror = function(event) {
  console.error("WebSocket error:", event);
};

后端代码：

import asyncio
import websockets

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

start_server = websockets.serve(handler, "localhost", 8080)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

以上代码创建了一个 WebSocket 连接，前端连接地址为 `ws://localhost:8080/chat`，后端监听地址为 `localhost:8080`，路径为 `/chat`。连接建立后，前端会输出 `WebSocket connected`，后端会等待客户端发送消息。

## 2. 实现聊天功能

实现聊天功能需要在前端和后端分别处理消息。在前端我们可以通过 `socket.send()` 方法发送消息，后端通过 `websocket.send()` 方法发送消息。在本例中，我们可以将一条消息发送给所有连接了该 WebSocket 的客户端，实现 1 对 多聊天。

前端代码：

var socket = new WebSocket("ws://localhost:8080/chat");

socket.onopen = function(event) {
  console.log("WebSocket connected");
};

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

socket.onclose = function(event) {
  console.log("WebSocket closed");
};

socket.onerror = function(event) {
  console.error("WebSocket error:", event);
};

function sendMessage() {
  var message = document.getElementById("message").value;
  socket.send(message);
  document.getElementById("message").value = "";
}

后端代码：

import asyncio
import websockets

connected = set()

async def handler(websocket, path):
    connected.add(websocket)
    while True:
        message = await websocket.recv()
        for conn in connected:
            await conn.send(message)

start_server = websockets.serve(handler, "localhost", 8080)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

以上代码在后端维护了一个连接集合 `connected`，当客户端连接时，将该连接添加到集合中。当客户端发送消息时，遍历连接集合并将消息发送给每个连接。

## 3. 实现私聊功能

实现私聊功能需要在前端和后端分别处理消息，并且需要在客户端和服务端维护用户信息。在本例中，我们可以在前端输入用户名，将用户名和消息一起发送给后端，服务端收到消息后，根据用户名找到对应的连接，将消息发送给该连接，实现 1 对 1聊天。

前端代码：

var socket = new WebSocket("ws://localhost:8080/chat");

socket.onopen = function(event) {
  console.log("WebSocket connected");
};

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

socket.onclose = function(event) {
  console.log("WebSocket closed");
};

socket.onerror = function(event) {
  console.error("WebSocket error:", event);
};

function sendMessage() {
  var username = document.getElementById("username").value;
  var message = document.getElementById("message").value;
  socket.send(JSON.stringify({username: username, message: message}));
  document.getElementById("message").value = "";
}

后端代码：

import asyncio
import json
import websockets

connected = {}

async def handler(websocket, path):
    username = ""
    while True:
        message = await websocket.recv()
        data = json.loads(message)
        if not username:
            username = data["username"]
            connected[username] = websocket
        else:
            dest_username = data["username"]
            if dest_username in connected:
                dest_conn = connected[dest_username]
                await dest_conn.send(data["message"])

start_server = websockets.serve(handler, "localhost", 8080)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

以上代码在后端维护了一个连接字典 `connected`，将用户名和连接一一对应。当客户端发送消息时，如果消息中包含用户名，则将消息发送给该用户名对应的连接，实现 1 对 1 聊天。

以上就是使用 WebSocket 实现网页聊天的方法，可以根据需求进行扩展，比如添加用户登录、离线消息等功能。