使用WebSocket开发网页聊天示例

2023-09-29 WebSocket 网页聊天 1541 0

使用 WebSocket 开发网页聊天示例，需要以下几个步骤：

在服务端创建 WebSocket 服务器。
在客户端创建 WebSocket 连接。
在客户端发送和接收消息。

使用WebSocket开发网页聊天示例

服务端

在服务端创建 WebSocket 服务器，需要使用 WebSocket 相关的 API 来建立 WebSocket 连接。以下是使用 Node.js 创建 WebSocket 服务器的示例：

const http = require("http");
const ws = require("ws");

const server = http.createServer((req, res) => {
  if (req.url === "/ws") {
    const wss = new ws(req);

    wss.on("message", (message) => {
      // 接收消息
      console.log(message);

      // 发送消息
      wss.send(message);
    });
  }

  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("Hello, World!");
});

server.listen(8080);

客户端

在客户端创建 WebSocket 连接，需要使用 WebSocket 相关的 API 来建立 WebSocket 连接。以下是使用 JavaScript 创建 WebSocket 连接的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Websocket Chat</title>
</head>
<body>
  <input type="text" id="message">
  <button onclick="send()">发送</button>

  <ul id="messages"></ul>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.0/socket.io.min.js"></script>
  <script>
    const socket = io("ws://localhost:8080");

    socket.on("message", (message) => {
      // 接收消息
      const li = document.createElement("li");
      li.textContent = message;
      document.getElementById("messages").appendChild(li);
    });

    function send() {
      // 发送消息
      socket.emit("message", document.getElementById("message").value);
    }
  </script>
</body>
</html>

示例说明

在服务端，我们使用 ws() 函数来创建一个 WebSocket 服务器。服务器会监听 /ws 路径上的 HTTP 请求。当客户端发起 HTTP 请求时，服务器会创建一个新的 WebSocket 连接。

在客户端，我们使用 io() 函数来创建一个 WebSocket 连接。连接成功后，我们会订阅 message 事件，以便接收服务端发送的消息。我们还可以使用 emit() 函数来发送消息给服务端。

网友点评

提交

相关阅读 WebSocket实现即时通信前后端代码示例为什么Web不采用WebSocket进行数据交互实时通信协议SSE和WebSocket对比 WebSocket和EventSource的区别 C# WebSocket Client在linux连接失败 C# .NET Core中Microsoft.Extensions.Caching.Redis库用法通过css设置a标签锚点页面顶部padding距离 .NET开发中常见的异常报错原因和解决方法？