Deno 中使用 WebSocket 实现聊天室的完整教程-JavaScript中文网-JavaScript教程资源分享门户

简介

WebSocket是一种在Web应用程序中可用的技术，它允许建立双向通信的信道，从而实现实时服务。Deno是一个用于开发JavaScript和TypeScript应用程序的运行时环境，它提供更好的模块解析机制、浏览器API中的部分实现以及提供安全的默认设置。本文将介绍如何使用Deno中的WebSocket来构建一个简单的聊天室。

WebSocket简介

WebSocket是一种在Web应用程序中可用的实时通讯技术，它能够在单个TCP连接上提供双向通讯信道。其与HTTP协议的区别在于它是全双工的，能够在客户端和服务器之间进行数据交换。WebSocket是为Web应用程序设计的，能够在实现长连接的同时保持低延迟和高吞吐量。

项目目录

我们的项目目录如下：

├── server.ts
├── client.ts
└── index.html

其中，server.ts为服务器端代码， client.ts为客户端代码， index.html是页面文件。

服务器端

首先我们需要创建一个WebSocket服务，这可以通过Deno的std/ws模块来实现。新建server.ts文件并输入以下代码：

// javascriptcn.com 代码示例
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(`websocket server is running on :${port}`);

for await (const req of serve(`:${port}`)) {
  const { conn, headers, r: bufReader, w: bufWriter } = req;
  acceptWebSocket({
    conn,
    bufReader,
    bufWriter,
    headers
  })
    .then(async (ws: WebSocket) => {
      console.log('client connected ...');
      for await (const event of ws) {
        if (typeof event === 'string') {
          console.log(`received message: ${event}`);
          ws.send(event);
        } else if (isWebSocketCloseEvent(event)) {
          console.log('client disconnected ...');
        }
      }
    });
}

该代码首先使用serve函数来监听服务端口，并且导入acceptWebSocket函数和WebSocket等标准函数用来处理WebSocket请求。接着当我们从浏览器中收到WebSocket请求时，服务器会向客户端发送连接成功的信息并监听来自客户端的消息，然后原封不动的返回给客户端。我们在控制台中打印WebSocket请求和响应，以便在调试过程中更轻松地查找错误。

客户端

现在我们编写一个简单的客户端，使其能够连接到WebSocket服务器并实现基本的聊天室交互功能。我们将文件命名为client.ts，并输入以下代码：

// javascriptcn.com 代码示例
const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('open', () => {
  console.log('connected to server ...');
});

socket.addEventListener('message', (event: MessageEvent) => {
  console.log(`received from server: ${event.data}`);
});

socket.addEventListener('close', () => {
  console.log('disconnected from server ...');
});

const messageInput = document.querySelector('#message-input') as HTMLInputElement;
const sendButton = document.querySelector('#send-button') as HTMLButtonElement;
const messageContainer = document.querySelector('#message-container') as HTMLDivElement;

sendButton.addEventListener('click', () => {
  const message = messageInput.value;
  socket.send(message);
  messageContainer.innerHTML += `<div class="message message-sent">${message}</div>`;
  messageInput.value = '';
});

该代码首先创建了一个WebSocket实例并连接到服务器，然后分别监听open、message、close事件以便进行一些相关的操作，例如控制台输出、消息显示以及输入框清空等。同时，我们编写sendButton监听事件，使其能够向服务端发送文本信息。

这里需要注意的是，WebSocket需要使用ws://或wss://前缀来建立与服务器的连接。在此例中，我们使用ws://来连接到服务端，此外，与服务器的端口号允许不同，但需要在两个文件中保持端口号一致。

UI设计

最后，我们用HTML和CSS来设计聊天室的UI，以便在我们之前编写的代码上进行部署和集成。新建index.html文件并输入以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>WebSocket Chat Room</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background-color: lightgray;
      }

      .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
      }

      .message-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: 50%;
        overflow-y: scroll;
        margin-bottom: 20px;
      }

      .message {
        padding: 5px;
        margin-bottom: 10px;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
      }

      .message-received {
        background-color: lightgreen;
        align-self: flex-start;
      }

      .message-sent {
        background-color: lightblue;
        align-self: flex-end;
      }

      .input-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }

      #message-input {
        width: 80%;
        height: 30px;
        padding: 5px;
        border: none;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
      }

      #send-button {
        width: 18%;
        height: 30px;
        margin-left: 2%;
        border: none;
        border-radius: 5px;
        background-color: lightblue;
        color: white;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <div class="message-container" id="message-container"></div>
        <div class="input-container">
          <input type="text" id="message-input" />
          <button id="send-button">Send</button>
        </div>
      </div>
    </div>
    <script src="client.ts"></script>
  </body>
</html>

该代码设计了两个主要的区域：一个是message-container用于显示聊天记录，另一个是input-container用于输入文本信息并发送。CSS使用Flexbox模型实现元素的布局和排列，并使用阴影和圆角等实现了基础UI设计。同时，我们引入了client.ts文件使得聊天室的交互可以完成。

运行聊天室

现在，我们只需要在项目根目录下打开终端，输入命令deno run --allow-net server.ts以启动WebSocket服务器，然后在浏览器中打开index.html文件，就可以在聊天室中实现交互。

总结

本文详细介绍了如何在Deno中使用WebSocket构建一个简单的聊天室，并提供了完整的代码实现。此实现方法可以充分说明使用Deno开发WebSocket应用程序的步骤和注意事项。同时，该方法也给前端开发人员提供了增加实时交互效果的一个可供选择的途径。

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