使用 Deno 开发简单的聊天室的最佳实践

使用 Deno 开发简单的聊天室的最佳实践

Deno 是一个新的运行时环境，它专注于安全性和可维护性，类似于 Node.js。但相比于 Node.js，Deno 有更好的安全性和更多的内置功能。本文将介绍如何使用 Deno 来开发一个简单的聊天室，包括实现 WebSocket 协议、分离前后端，以及使用 Deno 的一些最佳实践。

实现 WebSocket 协议

在聊天室中，我们需要实现即时通讯的功能。这个功能可以通过 WebSocket 协议来实现。Denoland 提供了与 WebSocket 相关的库，可以很方便地完成 WebSocket 服务器的开发。

首先，在命令行中输入以下命令来安装 Deno 的 WebSocket 库：

deno install --allow-net --unstable https://deno.land/std/ws/mod.ts

接下来，我们可以编写一个简单的服务器，并根据 WebSocket 的 API 编写与客户端的通信部分：

// www.javascriptcn.com code example
import { serve } from "https://deno.land/std/http/server.ts";
import { acceptWebSocket, isWebSocketCloseEvent, WebSocket } from "https://deno.land/std/ws/mod.ts";

const port = 3000;
console.log(`Listening on port ${port}...`);

for await (const req of serve({ port })) {
  const { conn, r: bufReader, w: bufWriter, headers } = req;

  try {
    const ws = await acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    });

    console.log("Connected");

    for await (const ev of ws) {
      if (typeof ev === "string") {
        console.log("ws:Text", ev);
        await ws.send(`You said: ${ev}`);
      } else if (ev instanceof Uint8Array) {
        console.log("ws:Binary", ev);
      } else if (isWebSocketCloseEvent(ev)) {
        console.log("ws:Close", ev);
      }
    }
  } catch (err) {
    console.error(`Failed to accept WebSocket: ${err}`);
  }
}

在客户端代码中，我们需要调用 WebSocket 的构造函数，传递服务器的地址，再添加对 message 事件的监听，以接收来自服务器的消息。

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

ws.addEventListener("message", ({ data }) => {
  console.log(`Received: ${data}`);
});

现在，我们已经成功地实现了 WebSocket 的服务器和客户端。但是，实际上，我们并不会将它们放在同一个文件中。我们会将它们分离，并使用工具来将它们打包成一个文件。

分离前后端

在实际项目中，我们通常会将前端和后端分离。这样做的好处是可以使代码更具可维护性和重用性，并使团队成员之间更好地合作。

我们可以将前端代码和后端代码分别放在两个文件夹中，并将它们打包成一个 JavaScript 文件。在 Deno 中，我们可以使用 deno bundle 命令来实现这一点：

deno bundle --unstable --no-check frontend/main.js frontend/bundle.js
deno bundle --unstable --no-check backend/main.js backend/bundle.js

在这里，我们将 frontend 文件夹中的 main.js 打包成 bundle.js，并将 backend 文件夹中的 main.js 打包成 bundle.js。这两个文件分别包含了所有前端和后端的代码，并可以在浏览器和 Deno 中运行。

最佳实践

在使用 Deno 开发应用程序时，有一些最佳实践可以帮助我们编写更安全、更可维护的代码。以下是其中的一些最佳实践：

使用 TypeScript

由于 Deno 支持 TypeScript，因此我们应该尽可能地使用 TypeScript。这可以让我们更快地发现潜在的错误，并提高代码的可读性。

显示地标明依赖项

当我们的应用程序中使用第三方库时，应该显示地标明它们。这可以帮助我们更好地了解应用程序的依赖性，并使版本控制更容易。

使用标准库

Deno 中有很多内置的模块可以帮助我们完成一些常见的任务。当可行时，我们应该尽可能地使用标准库中提供的模块。

保持最新

由于 Deno 是一个不断发展的平台，因此我们应该保持最新的版本。这可以让我们享受到最新的功能和修复已知的问题。

静态分析和测试

我们应该在开发应用程序之前编写和运行测试。这将有助于我们发现和解决潜在的问题，并使我们更加自信地修改代码。此外，我们可以使用工具来帮助我们分析代码并发现潜在的问题。

示例代码

以下是一个示例聊天室的代码，使用 Deno、WebSocket、TypeScript 和 React 编写。它将前端和后端分离，并包含一些最佳实践。

// www.javascriptcn.com code example
// backend.ts
import { serve } from "https://deno.land/std/http/server.ts";
import { acceptWebSocket, WebSocket } from "https://deno.land/std/ws/mod.ts";

const port = 3000;
console.log(`Listening on port ${port}...`);

for await (const req of serve({ port })) {
  const { conn, r: bufReader, w: bufWriter, headers } = req;

  try {
    const ws = await acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    });

    console.log("Connected");

    for await (const ev of ws) {
      if (typeof ev === "string") {
        console.log("Received: ", ev);
        await ws.send(`You said: ${ev}`);
      } else if (ev instanceof Uint8Array) {
        console.log("Received binary: ", ev);
      }
    }
  } catch (err) {
    console.error(`Failed to accept WebSocket: ${err}`);
  }
}

// www.javascriptcn.com code example
// frontend.tsx
import React, { useState } from "https://esm.sh/react";
import { render } from "https://esm.sh/react-dom";
import { WebSocket } from "https://esm.sh/@nhost/hasura-socket";

type ChatMessage = {
  user: string;
  message: string;
};

const ws = new WebSocket(
  "wss://your-backend.com/v1/graphql",
  {
    headers: {
      "x-hasura-admin-secret": "your-secret",
    },
  }
);

const App = () => {
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState<ChatMessage[]>([]);

  const handleSend = () => {
    ws.send(JSON.stringify({ message }));
    setMessage("");
  };

  ws.onmessage = ({ data }) => {
    const { chat_message } = JSON.parse(data);

    setMessages([...messages, chat_message]);
  };

  return (
    <div>
      <h1>Chat Room</h1>
      {messages.map(({ user, message }, index) => (
        <p key={index}>
          <strong>{user}: </strong>
          {message}
        </p>
      ))}
      <form onSubmit={(e) => e.preventDefault()}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button onClick={handleSend}>Send</button>
      </form>
    </div>
  );
};

render(<App />, document.getElementById("root"));

以上就是使用 Deno 开发简单聊天室的最佳实践。有了这些知识，你可以开始使用 Deno 来构建安全、具有扩展性和可维护性的应用程序了。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d02f73e46428fe9ece6d5b