Serverless 架构与 WebSocket 快速开发实例-JavaScript中文网-JavaScript教程资源分享门户

随着云计算技术的不断发展，Serverless 架构作为一种新型的云计算架构模式，逐渐成为了云计算领域的热门话题。Serverless 架构的特点是将应用程序的开发、部署和运行都交给云服务提供商来管理，开发者只需要专注于业务逻辑的开发，无需关注底层的服务器架构和运维工作。而 WebSocket 则是一种在 Web 应用程序中实现实时双向通信的技术，可以用于实现实时聊天、在线游戏等功能。本文将介绍如何使用 Serverless 架构和 WebSocket 技术快速开发一个实时聊天室应用。

准备工作

在开始开发之前，我们需要准备以下工具和环境：

Node.js：用于开发和运行 JavaScript 代码的环境；
AWS CLI：用于管理 AWS 云服务的命令行工具；
Serverless Framework：用于快速开发和部署 Serverless 应用程序的框架；
WebSocket API Gateway 插件：用于在 Serverless Framework 中创建 WebSocket API Gateway 的插件。

创建 Serverless 应用程序

首先，我们使用 Serverless Framework 创建一个新的 Serverless 应用程序：

$ serverless create --template aws-nodejs --path chat-room
$ cd chat-room

然后，我们需要在 Serverless Framework 的配置文件 serverless.yml 中添加 WebSocket API Gateway 插件：

// javascriptcn.com 代码示例
service: chat-room

plugins:
  - serverless-websockets-plugin

custom:
  websockets:
    authorizer: NONE
    routes:
      - $connect: handler.connect
      - $disconnect: handler.disconnect
      - $default: handler.default

在上述配置中，我们指定了 WebSocket API Gateway 的路由规则和处理函数。$connect 表示客户端连接事件，$disconnect 表示客户端断开连接事件，$default 表示其他事件。我们还指定了 WebSocket API Gateway 的身份验证方式为 NONE，即无需身份验证。

编写 WebSocket 处理函数

接下来，我们需要编写 WebSocket 处理函数，用于处理客户端连接、断开连接和消息发送等事件。在 handler.js 文件中，我们可以编写如下代码：

// javascriptcn.com 代码示例
let connections = {};

module.exports.connect = async (event, context) => {
  const connectionId = event.requestContext.connectionId;
  connections[connectionId] = {};
  return sendResponse(200, 'Connected');
};

module.exports.disconnect = async (event, context) => {
  const connectionId = event.requestContext.connectionId;
  delete connections[connectionId];
  return sendResponse(200, 'Disconnected');
};

module.exports.default = async (event, context) => {
  const connectionId = event.requestContext.connectionId;
  const body = JSON.parse(event.body);
  const message = body.message;
  for (const id in connections) {
    if (id !== connectionId) {
      await sendWebSocketMessage(id, message);
    }
  }
  return sendResponse(200, 'Message sent');
};

const sendResponse = (statusCode, message) => {
  return {
    statusCode,
    body: JSON.stringify({ message }),
  };
};

const sendWebSocketMessage = async (connectionId, message) => {
  const endpoint = process.env.WEB_SOCKET_API_ENDPOINT;
  const apiGateway = new AWS.ApiGatewayManagementApi({ endpoint });
  await apiGateway.postToConnection({ ConnectionId: connectionId, Data: message }).promise();
};

在上述代码中，我们定义了三个处理函数：connect、disconnect 和 default。connect 函数用于处理客户端连接事件，将客户端的连接信息保存到 connections 对象中；disconnect 函数用于处理客户端断开连接事件，将客户端的连接信息从 connections 对象中删除；default 函数用于处理客户端发送消息事件，将消息发送给所有其他客户端。

我们还定义了两个辅助函数：sendResponse 用于返回响应结果；sendWebSocketMessage 用于向指定客户端发送消息。

部署 Serverless 应用程序

最后，我们使用 Serverless Framework 将应用程序部署到 AWS 上：

$ serverless deploy

部署成功后，Serverless Framework 会自动创建一个 WebSocket API Gateway，并返回其访问地址，如：

endpoints:
  wss://abc123xyz.execute-api.us-east-1.amazonaws.com/dev

我们可以将该地址复制到客户端代码中，用于连接 WebSocket 服务。

编写客户端代码

最后，我们需要编写客户端代码，用于连接 WebSocket 服务并发送消息。在浏览器中，我们可以编写如下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Chat Room</title>
  </head>
  <body>
    <div>
      <input type="text" id="message-input" />
      <button id="send-button">Send</button>
    </div>
    <div id="message-list"></div>
    <script>
      const endpoint = 'wss://abc123xyz.execute-api.us-east-1.amazonaws.com/dev';
      const socket = new WebSocket(endpoint);
      socket.onopen = () => {
        console.log('Connected to WebSocket');
      };
      socket.onmessage = (event) => {
        const message = JSON.parse(event.data);
        const messageList = document.getElementById('message-list');
        const messageItem = document.createElement('div');
        messageItem.innerText = message;
        messageList.appendChild(messageItem);
      };
      const sendMessage = () => {
        const input = document.getElementById('message-input');
        const message = input.value;
        socket.send(JSON.stringify({ message }));
        input.value = '';
      };
      const sendButton = document.getElementById('send-button');
      sendButton.addEventListener('click', sendMessage);
    </script>
  </body>
</html>

在上述代码中，我们定义了一个 WebSocket 对象，并指定了其连接地址。当连接成功后，我们可以通过 onmessage 事件监听服务器发送的消息，并在页面上显示。同时，我们还定义了一个发送消息的函数 sendMessage，并通过 click 事件监听发送按钮的点击事件。

总结

本文介绍了如何使用 Serverless 架构和 WebSocket 技术快速开发一个实时聊天室应用。通过 Serverless Framework 和 WebSocket API Gateway 插件，我们可以快速创建一个 WebSocket 服务，并使用 JavaScript 编写处理函数。同时，我们还编写了一个简单的客户端代码，用于连接 WebSocket 服务并发送消息。这个示例应用程序可以作为学习 Serverless 架构和 WebSocket 技术的入门案例，也可以作为实现实时通信功能的基础框架。

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