Serverless 架构下如何使用 WebSocket-JavaScript中文网-JavaScript教程资源分享门户

前言

Serverless 架构（无服务器架构）是近年来快速发展的一种新型架构，它最显著的特点是开发者不需要关心服务器的管理，只需要关注业务逻辑的实现，从而极大地提升了开发效率。但是对于实时通信类应用（如聊天室、实时消息推送等），使用传统的 RESTful API 往往效果不佳。而 WebSocket 协议则提供了一个更为高效、稳定且可扩展的实时通信解决方案，因此在 Serverless 架构中使用 WebSocket 协议来进行实时通信显得非常必要。

本文将着重介绍如何在 Serverless 架构下使用 WebSocket 协议进行实时通信，内容详细、有深度和指导意义，希望对广大前端开发者有所帮助。

WebSocket 协议简介

WebSocket 协议是一种基于 TCP 协议的双向通信协议，它能够在客户端和服务器之间创建持久性的连接，从而能够实现实时通信。

使用 WebSocket 协议进行通信时，客户端向服务器发送一个 HTTP 请求，请求头部包含了协议升级的请求，服务器返回 101 状态码表示同意协议升级。在此之后，双方就可以在一个持久性的连接上进行通信，双方都可以发送消息。

在使用 Serverless 架构进行 WebSocket 开发时，需要注意以下几个方面。

选择合适的平台

在使用 Serverless 架构进行 WebSocket 开发时，选择一个合适的平台非常关键。AWS Lambda 和 Azure Functions 是目前比较流行和成熟的 Serverless 平台，它们都提供了对 WebSocket 协议的支持，是开发 WebSocket 应用的不二选择。

消息的序列化和反序列化

在 WebSocket 协议中，双方之间传输的消息是以二进制形式进行交互的。因此，在应用中需要对消息进行序列化和反序列化的处理，以便于开发者能够方便地对消息进行处理。

这里我们可以选择使用 protobuf 或者 msgpack 等轻量的序列化库来简化这一过程。

连接管理

在 Serverless 架构中，每个请求都会触发完整的函数计算周期，因此需要注意连接管理的问题。开发者需要实现一个连接管理器来维护连接的状态，包括新连接的认证和连接的关闭等。此外，多人在线游戏等应用需要注意连接总数的限制，以确保系统的稳定性和可扩展性。

可扩展性

在大流量场景下，WebSocket 应用需要具备良好的可扩展性。这包括使用无状态架构、分片等手段来降低每个连接的资源消耗，以及使用负载均衡等手段来扩展连接数。

示例代码

下面是使用 AWS Lambda 进行 WebSocket 开发的示例代码。代码使用 Node.js 实现，采用了 Serverless Framework 进行部署和管理。本地开发环境需要安装 Node.js 和 Serverless Framework。

在本示例中，我们实现了一个简单的实时消息推送的应用，当有新连接加入时，会发送欢迎消息，当有消息发送时，会广播到所有连接。

serverless.yml

// javascriptcn.com 代码示例
service: serverless-websocket-demo

provider:
  name: aws
  runtime: nodejs12.x
  stage: dev
  region: us-west-2

functions:
  websocket:
    handler: handler.websocket
    events:
      - websocket:
          route: $connect
      - websocket:
          route: $disconnect
      - websocket:
          route: message

handler.js

// javascriptcn.com 代码示例
const AWS = require('aws-sdk');
const { v4: uuidv4 } = require('uuid');
const msgpack = require('msgpack-lite');

const dynamodb = new AWS.DynamoDB.DocumentClient();

// 连接管理器
class ConnectionManager {
  constructor() {
    this.connections = {};
  }

  // 新连接加入
  async connect(connectionId) {
    this.connections[connectionId] = {
      connectionId,
      createdAt: Date.now(),
    };
    console.log(`[CONNECT] ${connectionId}`);
  }

  // 连接断开
  async disconnect(connectionId) {
    delete this.connections[connectionId];
    console.log(`[DISCONNECT] ${connectionId}`);
  }

  // 广播消息
  async broadcast(data) {
    const body = msgpack.encode(data);
    const promises = Object.values(this.connections).map(({ connectionId }) => {
      return new AWS.ApiGatewayManagementApi({
        apiVersion: '2018-11-29',
        endpoint: process.env.API_GATEWAY_ENDPOINT,
      }).postToConnection({
        ConnectionId: connectionId,
        Data: body,
      }).promise().catch(e => {
        if (e.statusCode === 410) {
          console.log(`[DISCONNECTED] ${connectionId}`);
          delete this.connections[connectionId];
        } else {
          console.error(e);
        }
      });
    });
    await Promise.allSettled(promises);
  }
}

const connectionManager = new ConnectionManager();

// 处理 $connect 事件
async function onConnect(event) {
  const { connectionId } = event.requestContext;
  await connectionManager.connect(connectionId);
  await send({ type: 'welcome', clientId: connectionId });
  return { statusCode: 200 };
}

// 处理 $disconnect 事件
async function onDisconnect(event) {
  const { connectionId } = event.requestContext;
  await connectionManager.disconnect(connectionId);
  return { statusCode: 200 };
}

// 处理消息
async function onMessage(event) {
  const { connectionId, body } = event;
  const { text } = msgpack.decode(body);
  await connectionManager.broadcast({
    type: 'message',
    text,
    clientId: connectionId,
  });
  return { statusCode: 200 };
}

// 发送消息
async function send(data) {
  const body = msgpack.encode(data);
  await new AWS.ApiGatewayManagementApi({
    apiVersion: '2018-11-29',
    endpoint: process.env.API_GATEWAY_ENDPOINT,
  }).postToConnection({
    ConnectionId: process.env.CONNECTION_ID,
    Data: body,
  }).promise();
}

// 处理请求
exports.websocket = async (event) => {
  console.log(event);

  try {
    switch (event.requestContext.routeKey) {
      case '$connect':
        return onConnect(event);
      case '$disconnect':
        return onDisconnect(event);
      case 'message':
        return onMessage(event);
    }
  } catch (e) {
    console.error(e);
    return { statusCode: 500 };
  }
};

deploy.sh

rm -rf .serverless
serverless package --stage dev --region us-west-2
serverless deploy --stage dev --region us-west-2

客户端代码

// javascriptcn.com 代码示例
const API_GATEWAY_ENDPOINT = 'wss://example.com/production';

const connection = new WebSocket(API_GATEWAY_ENDPOINT);

connection.addEventListener('open', (event) => {
  console.log('WebSocket connected');
});

connection.addEventListener('close', (event) => {
  console.log('WebSocket disconnected');
});

connection.addEventListener('message', (event) => {
  const data = msgpack.decode(new Uint8Array(event.data));
  console.log('WebSocket received', data);
  switch (data.type) {
    case 'welcome':
      console.log(`[WELCOME] Welcome to the chat room, your id is ${data.clientId}`);
      break;
    case 'message':
      console.log(`[MESSAGE] [${data.clientId}]: ${data.text}`);
      break;
  }
});

// 发送消息
function sendMessage(message) {
  const data = msgpack.encode({ text: message });
  connection.send(data);
}

总结

在 Serverless 架构中使用 WebSocket 协议进行实时通信是一项非常必要和有挑战的任务。本文对于如何使用 Serverless 架构进行 WebSocket 开发进行了详细的介绍和指导，希望对广大前端开发者有所帮助。

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