如何在 Deno 中使用 Socket.io 实现多人实时聊天室？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实时聊天室是一个非常常见的应用场景。Deno 是一个新兴的 JavaScript 与 TypeScript 运行时环境，提供了一种更加安全和现代化的开发方式。而 Socket.io 则是一个常用的实现 WebSocket 协议的 JavaScript 库，支持实时双向通信。

本文将介绍在 Deno 环境下，如何使用 Socket.io 实现一个多人实时聊天室。我们会探讨如何使用 Deno 中的 WebSocket API 和 Socket.io 库进行开发，以及如何处理连接、断开连接、消息发送等操作。最后，我们将提供完整的示例代码，供读者参考。

准备工作

在开始之前，我们需要先配置好 Deno 环境以及安装所需的依赖库。你可以在终端中输入以下命令安装 deno 和 socket.io：

$ curl -fsSL https://deno.land/x/install/install.sh | sh
$ deno install --allow-net --unstable https://deno.land/x/denon/denon.ts
$ deno run --allow-net --unstable https://deno.land/x/socket_io/server.ts

其中，第二行命令的作用是安装 denon，它是一个类似于 nodemon 的工具，可以在代码修改后自动重启应用。第三行命令安装 Socket.io 库。

编写服务器端代码

我们先来编写服务器端的代码，创建一个名为 server.ts 的文件，输入以下代码：

// javascriptcn.com 代码示例
import { Server } from "https://deno.land/x/socket_io/server.ts";

const io = new Server();

io.on("connection", (socket) => {
  console.log("a user connected");

  socket.on("chat message", (msg) => {
    console.log("message: " + msg);
    io.emit("chat message", msg);
  });

  socket.on("disconnect", () => {
    console.log("user disconnected");
  });
});

io.listen(3000);
console.log("Server running at http://localhost:3000/");

以上代码引入了 socket_io/server.ts 模块，创建了一个 Socket.io 服务器实例，监听客户端的连接请求。在客户端连接成功后，我们通过 socket.on 监听客户端发送过来的 chat message 事件，并把收到的消息通过 io.emit 广播给所有客户端。另外，当客户端断开连接时，我们也需要处理 disconnect 事件。

最后，我们使用 io.listen 函数指定服务器的端口号，并输出一条启动信息。

编写客户端代码

接下来，我们需要编写客户端的代码，创建一个名为 client.ts 的文件，输入以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Socket.io Chat Room</title>
  <style>
    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form">
    <input id="input" autocomplete="off">
    <button>Send</button>
  </form>
  <script type="module" src="https://cdn.socket.io/3.0.3/socket.io.min.js"></script>
  <script type="module">
    import { io } from "https://cdn.socket.io/3.0.3/socket.io.esm.min.js";

    const socket = io("http://localhost:3000");

    const messages = document.getElementById("messages");
    const form = document.getElementById("form");
    const input = document.getElementById("input");

    form.addEventListener("submit", (e) => {
      e.preventDefault();
      if (input.value) {
        socket.emit("chat message", input.value);
        input.value = "";
      }
    });

    socket.on("chat message", (msg) => {
      const li = document.createElement("li");
      li.textContent = msg;
      messages.appendChild(li);
    });
  </script>
</body>
</html>

以上代码通过 CDN 引入了 Socket.io 的客户端库，创建一个 socket 实例，连接到服务器的地址。同时，我们在 HTML 中创建了一个聊天界面，并用 JavaScript 处理了表单的提交事件。

在 socket.on 监听到服务器广播的 chat message 事件时，我们创建一个列表项，并将收到的消息追加到聊天界面中。

启动应用程序

最后，我们需要在终端中输入以下命令来启动应用程序：

$ denon --allow-net --unstable server.ts

其中，--allow-net 参数是为了允许应用程序访问网络，--unstable 参数是为了开启实验性的 features。

然后，我们可以打开浏览器，访问 http://localhost:3000/，即可看到聊天界面，输入消息后，可以在所有客户端实时显示。

总结

本文介绍了如何在 Deno 中使用 Socket.io 实现一个多人实时聊天室。我们通过 Deno 中的 WebSocket API 和 Socket.io 库进行开发，处理了连接、断开连接、消息发送等操作，并提供了完整的示例代码。希望本文能对读者学习 Deno、Socket.io 以及实时通信有帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654368a37d4982a6ebd27be3