使用 Koa.js 搭建基于 WebSocket 的聊天室应用程序-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种通信协议，它允许客户端和服务器之间实时双向通信。在现代的 Web 应用程序中，基于 WebSocket 的实时应用已经变得越来越普遍。Koa.js 是一个基于 Node.js 平台的 Web 应用程序框架，它提供了一个简洁、优雅的 API，帮助我们快速搭建 Web 应用程序。本文将介绍如何使用 Koa.js 搭建一个基于 WebSocket 的聊天室应用程序。

WebSocket 简介

WebSocket 是一种基于 TCP 的通信协议，它允许客户端和服务器之间实时双向通信。相比于传统的 HTTP 协议，默认情况下，WebSocket 连接是持久化的，它在客户端和服务器之间建立一个通信通道，使得客户端可以在任何时候向服务器发送消息，服务器也可以在任何时候向客户端发送消息。这种实时通信的好处在于，我们可以在客户端和服务器之间进行高效、低延迟的通信，实现实时的数据更新和用户交互。

Koa.js 简介

Koa.js 是一个基于 Node.js 平台的 Web 应用程序框架，它提供了一个简洁、优雅的 API，让我们可以快速搭建 Web 应用程序。Koa.js 的核心理念是中间件（Middleware），它允许我们在应用程序的请求和响应周期中添加自己的逻辑，从而实现一些强大的功能，如路由、模板渲染、错误处理等。

搭建一个基于 WebSocket 的聊天室应用程序

在本节中，我们将学习如何使用 Koa.js 搭建一个基于 WebSocket 的聊天室应用程序。这个聊天室应用程序将允许多个用户在同一个房间中进行实时聊天。在这个应用程序中，我们将使用以下技术：

Koa.js：用于搭建 Web 应用程序。
WebSocket：用于实现实时双向通信。
Socket.io：用于简化 WebSocket 的使用。
MongoDB：用于存储聊天室的消息记录。

步骤一：安装依赖

在开始之前，我们需要安装一些依赖。打开终端并运行以下命令：

$ mkdir chatroom && cd chatroom
$ npm init -y
$ npm install --save koa koa-router koa-bodyparser socket.io mongodb

这个命令将：

创建一个名为 chatroom 的新文件夹，并进入该文件夹。
初始化一个新的 Node.js 应用程序，并创建一个 package.json 文件。
安装 koa、koa-router、koa-bodyparser、socket.io 和 mongodb 依赖。

步骤二：搭建基本的 Web 应用程序

接下来，我们将使用 Koa.js 搭建一个基本的 Web 应用程序。打开 app.js 文件并编写以下代码：

// javascriptcn.com 代码示例
const Koa = require('koa');
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');

const app = new Koa();

router.get('/', async (ctx) => {
  ctx.body = 'Hello World!';
});

app.use(bodyParser());
app.use(router.routes());

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

这个代码会：

引入 Koa.js、koa-router 和 koa-bodyparser 依赖。
创建一个名为 app 的新的 Koa.js 应用程序。
创建一个名为 router 的新的 Koa.js 路由器。
添加一个基本的路由，返回一个字符串“Hello World!”。
安装 bodyParser 中间件，使得在请求中间件中可以获取请求体。
将路由器添加到应用程序中。
启动服务器在端口3000上。

运行以下命令启动应用程序：

$ node app.js

现在打开浏览器并访问 http://localhost:3000，你将会看到一个显示“Hello World!”的页面。

步骤三：添加 WebSocket 支持

接下来，我们将使用 Socket.io 和 Koa.js 来添加 WebSocket 支持。打开 app.js 文件并编写以下代码：

// javascriptcn.com 代码示例
const Koa = require('koa');
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');
const http = require('http');
const io = require('socket.io')(http);

const app = new Koa();

router.get('/', async (ctx) => {
  ctx.body = 'Hello World!';
});

// 启动服务器在端口3000上。
const server = http.createServer(app.callback());
server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

// 连接 Socket.io
io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

这个代码会：

引入 http 和 socket.io 依赖。
创建一个名为 server 的新的 HTTP 服务器，并将 Koa.js 应用程序作为回调函数传递给它。
在 server 上启动一个监听端口为 3000 的服务器。
创建一个 Socket.io 服务器，并将它连接到服务器上。
在连接成功时，打印一条消息。
在断开连接时，打印一条消息。

运行以下命令启动应用程序：

$ node app.js

现在在控制台中可以看到以下输出：

Server listening on port 3000

打开浏览器，在 console 中输入以下代码会连接 WebSocket：

var socket = io('http://localhost:3000');

再次在控制台中，现在你可以看到以下输出：

a user connected

WebSocket 建立连接后，我们需要做的是向聊天室中实现消息广播，使得所有连接的客户端都可以收到消息。

我们可以使用 Socket.io 的 emit() 方法来实现这个功能。在 app.js 中添加以下代码：

// javascriptcn.com 代码示例
// 连接 Socket.io
io.on('connection', (socket) => {
  console.log('a user connected');

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

  socket.on('chat message', (msg) => {
    console.log(`message: ${msg}`);
    socket.emit('chat message', msg);
  });
});

在这个代码中，我们添加了一个事件处理程序，它会在客户端发送“chat message”事件时被触发。当事件被触发时，我们会在控制台中打印出接收到的消息，并使用 emit() 方法将消息广播给每个连接到服务器的客户端。

现在我们需要在客户端中添加一个事件监听器来处理从服务器接收到的消息。打开 index.html 文件并添加以下代码：

// javascriptcn.com 代码示例
<html>
  <head>
    <title>聊天室</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m"><button>Send</button>
    </form>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script>
      var socket = io('http://localhost:3000');
      socket.on('chat message', function(msg){
        var li = document.createElement('li');
        li.textContent = msg;
        document.getElementById('messages').appendChild(li);
      });
    </script>
  </body>
</html>

这个代码会：

在页面中创建一个 id 为“messages”的无序列表。
在页面中创建一个表单，包括一个文本框和一个发送按钮。
在页面中引入 Socket.io 库，并将它连接到服务器上。
添加一个事件监听器，它会在服务器向客户端广播消息时被触发。当事件被触发时，我们将消息添加到无序列表中。

现在再次启动应用程序，打开浏览器并访问 http://localhost:3000，你将会看到一个聊天室应用程序。你可以尝试发送消息，并在所有连接的客户端中看到消息被广播。

步骤四：将聊天记录存储到 MongoDB

最后，我们将使用 MongoDB 存储聊天记录，使得客户端可以在刷新页面之后也可以查看过去的聊天历史记录。打开 app.js 文件并添加以下代码：

// javascriptcn.com 代码示例
const Koa = require('koa');
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');
const http = require('http');
const io = require('socket.io')(http);
const { MongoClient } = require('mongodb');

const app = new Koa();
const url = 'mongodb://localhost:27017';
const dbName = 'chatroom';

router.get('/', async (ctx) => {
  ctx.body = 'Hello World!';
});

// 连接 MongoDB
let db;
MongoClient.connect(url, { useUnifiedTopology: true }, (err, client) => {
  console.log("Connected successfully to server");
  db = client.db(dbName);
});

// 启动服务器在端口3000上。
const server = http.createServer(app.callback());
server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

// 连接 Socket.io
io.on('connection', (socket) => {
  console.log('a user connected');

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

  socket.on('chat message', (msg) => {
    console.log(`message: ${msg}`);
    db.collection('messages').insertOne({ timestamp: Date.now(), message: msg });
    socket.emit('chat message', msg);
  });
});

在这个代码中，我们：

引入 MongoClient 依赖，用于连接和操作 MongoDB。
定义变量 url 和 dbName。
在应用程序启动时，连接 MongoDB，并将连接的数据库保存在名为 db 的变量中。
在“chat message”事件被触发时，将消息插入到名为“messages”的集合中。

现在我们需要在客户端中添加一个必要的事件监听器来加载聊天记录。打开 index.html 文件并添加以下代码：

// javascriptcn.com 代码示例
<html>
  <head>
    <title>聊天室</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m"><button>Send</button>
    </form>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script>
      var socket = io('http://localhost:3000');
      socket.on('chat message', function(msg){
        var li = document.createElement('li');
        li.textContent = msg;
        document.getElementById('messages').appendChild(li);
      });
      fetch('/messages')
        .then(response => response.json())
        .then(data => data.forEach((item) => {
          var li = document.createElement('li');
          li.textContent = `${item.timestamp}: ${item.message}`;
          document.getElementById('messages').appendChild(li);
        }))
        .catch(error => console.error(error));
      document.querySelector('form').addEventListener('submit', (e) => {
        e.preventDefault();
        socket.emit('chat message', document.getElementById('m').value);
        document.getElementById('m').value = '';
      });
    </script>
  </body>
</html>

这个代码会：

使用 fetch() 方法从服务器获取聊天记录。
在返回的 JSON 中循环遍历，为每条消息创建一个列表项并将其添加到无序列表中。
添加 submit 事件监听器，当表单提交时发送消息。

现在再次启动应用程序，并在聊天室中发送一些消息，然后刷新页面。你将会看到过去的聊天记录被加载到应用程序中。

总结

在本文中，我们了解了 WebSocket 和 Koa.js，并学习了如何使用它们来搭建一个基于 WebSocket 的聊天室应用程序。我们使用了 Socket.io 简化了 WebSocket 的使用，并使用 MongoDB 存储聊天记录，使得客户端可以在刷新页面之后也可以查看过去的聊天历史记录。这个聊天室应用程序提供了一个很好的示例，展示了如何实现实时双向通信以及在现代 Web 应用程序中使用 WebSocket。

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