![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526102238-82a3ff9e-6d75-48c3-838a-a959fe8a1c9d.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ueb859759&margin=%5Bobject%20Object%5D&originHeight=359&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u9cadc1c1-3555-47f9-93d9-17d2a84321b&title=)
作者 | 寒斜（阿里云云原生中介軟體前端負責人）
 
如何使用 Serverless 架構實現全雙工通訊的應用，Serverless 架構中資料庫是如何使用的，本篇文章將為您揭開答案。

Serverless 的理念是即時彈性，用完即走。服務並非長時間執行，這也就意味著像 websocket 這種長連結的請求模式看起來並不適合 Serverless。

是否有其它的辦法即可以滿足長連線模式請求，又能夠利用 Serverless 本身特性呢？

答案是肯定的，上一篇文章我們談及了閘道器的關鍵作用，所以這次也是透過閘道器來解決全雙工通訊的問題。本次將以彈幕場景為例，為大家展開我們是怎麼使用 Serverless 架構來實現這個場景的。

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/gif/22456429/1641526102274-1f640ce9-3b22-4283-ac44-08c3b7944688.gif#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u194b4bf1&margin=%5Bobject%20Object%5D&originHeight=737&originWidth=1079&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ubea9b534-156a-42c6-abea-621409aa500&title=)
應用效果預覽

彈幕應用的實用場景比較多，比如運營推廣，年會活動等。但是通常實現一套帶管控的流程，且部署釋出的話，一般會花費比較長的時間。本篇實戰則可以讓你在 2 分鐘之內就部署好自己的彈幕應用。同時做到支援炫彩和彈幕內容管控，你可以用它來豐富公司年會的形式。文末也會貼上原始碼，可以供大家參考和二次定製。

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526102271-bcd02774-3402-46c8-92f4-af9c4a525d3b.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ub5baf15a&margin=%5Bobject%20Object%5D&originHeight=520&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u9d4a0d60-1cc6-4801-a617-81626f1e0a6&title=)
架構一覽

整體架構依然採用 dns 解析 -> 閘道器 -> oss | fc 。不一樣的是分了 3 個靜態資源的工程，函式部分則採用事件驅動和 http 相結合，並且 api 部分採用 tablestore 進行資料的持久化。

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526102239-11b4a307-cfb7-4579-b60b-0116d5554237.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ub0306154&margin=%5Bobject%20Object%5D&originHeight=701&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uf1f63f28-1d70-4ecb-91ae-993d4cc509c&title=)
流程說明

彈幕應用總工由**大螢幕， 個人使用者，管理員**三個客戶端，以及一個**註冊裝置的服務** & **api 服務**組成。客戶端跟服務端的長連結由閘道器來承載，每次客戶端連線到閘道器的時候，閘道器都會儲存裝置編號，並且觸發一次註冊函式，裝置編號儲存到 tablestore。

當使用者發起彈幕的時候經閘道器到 api 服務，api 服務會做一次查詢先判斷彈幕是否被管制，如果無管制則直接查詢當前的大螢幕裝置 id，並且進行閘道器的下行呼叫，閘道器在發到前端頁面，顯示資料。如果被管制，則查詢線上的管理員裝置，將彈幕下行通知到閘道器，閘道器傳送給管理員前端頁面。
### 資料表設計

- equipment（裝置）
| 欄位 | 型別

| 說明 |
| --- | --- | --- |
| id

| string

| 裝置表主鍵

|
| deviceld

| string | 裝置id |
| docld

| string | 備用欄位

|
| type

| string | 裝置型別（screen | admin）

|

- barrage（彈幕）
| 欄位 | 型別 | 說明 |
| --- | --- | --- |
| gid | string | 分割槽鍵 |
| id | integer | 主鍵自增 |
| fromId | string | 彈幕作者id |
| fromName | string | 來源作者名稱 |
| color | string | 彈幕顏色 |
| fontSize | string | 彈幕字型大小 |
| checkStatus | integer | 彈幕狀態0（未處理）1（審批透過）2（審批未過） |
| sendTime | string | 彈幕傳送時間 |
| checkTime | string | 彈幕更新時間 |
| message | string | 彈幕內容 |

- interceptor (過濾器)
| 欄位 | 型別 | 說明 |
| --- | --- | --- |
| id | integer | 主鍵/分割槽鍵 |
| status | integer | 攔截狀態0不攔截 1攔截 2攔截加過濾 |
| filterWords | string | 過濾欄位 |

### **1、準備工作

**
同前篇[《人人都是 Serverless 架構師 | 現代化 Web 應用開發實戰》](http://mp.weixin.qq.com/s?__biz=MzI4NzI5MDM1MQ==&mid=2247503083&idx=1&sn=600f916682d1fd0f71d7e1685311ee05&chksm=ebcd6a6bdcbae37da390fc3c65668bc0278145caed7d821e63ca54c5eb7ab79a4b30aba2d5cb&scene=21#wechat_redirect)文章一樣需要提前準備好域名，並安裝好 Serverless Devs 開發者工具,以及下面的產品：

- 雲解析 DNS
- API 閘道器
- 函式計算
- 物件儲存 OSS
- Tablestore

這次我們引入了 tablestore 的資料庫記性資料的持久化功能，同樣需要建立好資料庫例項備用。
### **2、操作步驟**

為了更好的展示效果，本次演示使用 ServerlessDesktop 來給大家演示一下如何 2 分鐘部署一個複雜的彈幕應用。你可以根據自身需要選擇 Serverless Devs Cli 或者 Serverless Desktop 對彈幕應用進行初始化和部署構建。
#### **1）秘鑰配置**

可參考金鑰獲取文件：
_http://www.serverless-devs.com/zh-cn/docs/provider-config/alibabacloud.html_

#### **2）初始化**

![1640699109341-25e3b150-6c12-4dcd-bdb2-15de714f4e10.gif](https://intranetproxy.alipay.com/skylark/lark/0/2022/gif/22456429/1641526201970-304e0175-578c-4ef6-a7e7-9ade23fa5d86.gif#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u0c2290c5&margin=%5Bobject%20Object%5D&name=1640699109341-25e3b150-6c12-4dcd-bdb2-15de714f4e10.gif&originHeight=958&originWidth=1777&originalType=binary&ratio=1&rotation=0&showTitle=false&size=3807068&status=done&style=none&taskId=u0b2132c6-4b79-4553-a107-e5561317131&title=)

本次初始化除了需要將應用模板下載到本地之外，還會幫忙初始化 tablestore 的表和資料，因此需要預配置幾個引數：

- 秘鑰別名 - 對應你的阿里雲賬號
- 域名 - 自定義域名
- bucketName - oss 的 bucket 名稱
- endpoint - 對應 tablestore 例項的公網訪問地址
- instance - 對應 tablestore 的例項名

預配置引數寫好後點選 “確定”,接下來的工作就叫給 Serverless Devs，它會幫我們初始化彈幕應用的表。

#### **3）構建部署

**
初始化之後，我們重新進入配置頁面，對專案進行部署。配置資訊 -> 全量操作 -> deploy 點選後其他的就交給 Serverless Devs了，它會幫助我們完成:

1. 大螢幕，管理後臺和玩家的前端部署;
1. 註冊函式以及 api 函式的部署
1. 以及閘道器的路由設定和閘道器的域名繫結

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/gif/22456429/1641526102270-bb9bda32-4b4d-41e2-a532-9ad1ea2e3f7b.gif#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u8d4c4989&margin=%5Bobject%20Object%5D&originHeight=582&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ub17c17f1-b21e-4a2d-9c97-52c12c11071&title=)
#### **4) 部署效果檢視

**

- 閘道器

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526102705-b6c62da3-28c7-46ab-b944-0f41cbd04cd7.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ucbdb0fcd&margin=%5Bobject%20Object%5D&originHeight=475&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ue5efb5c6-970c-4118-9157-008d9a7f3a5&title=)

- 函式計算

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526102728-ddbd68f9-a2bc-4a19-9445-e3dec624add9.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=uf6cbff7c&margin=%5Bobject%20Object%5D&originHeight=84&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ua263dc85-5193-4439-97e4-0ceef0ecfb0&title=)

- Oss

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526103211-36d182cb-8089-47e2-9350-719f98aa025f.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u01d47a09&margin=%5Bobject%20Object%5D&originHeight=189&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uf17d1a99-a819-425f-9525-ef0b08d7080&title=)

- DNS

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526103187-6401fba1-dbc2-4007-8de3-dc86e3a5c34d.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ua71d1b1b&margin=%5Bobject%20Object%5D&originHeight=41&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u426ea5c4-ea8b-46ca-b976-b3006654a55&title=)

此時訪問_ barragego.serverless-developer.com _發現訪問不同，檢查發現原因是 apigateway 的域名和 oss 域名都未繫結成功，我們手動處理一下:
![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526103186-f9360b47-655d-431c-a325-a94eb35fa1ce.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=uafe8b561&margin=%5Bobject%20Object%5D&originHeight=493&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uc431e369-75a8-45f3-81b5-9e1f3f2ec16&title=)
![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526103342-57c85cc0-4782-407a-849a-4b8436f26292.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=VrELq&margin=%5Bobject%20Object%5D&originHeight=510&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u0cb88bc1-7eef-4d76-b876-d451ab44a9c&title=)
![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526103550-da6cc172-e0fc-458c-81ae-2cf696951d87.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=sTVEE&margin=%5Bobject%20Object%5D&originHeight=262&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ude3e6219-4b5c-442a-b6fe-c98137a94e1&title=)

接下來再訪問 _barragego.serverless-developer.com_ 即可看到效果：

### **2、資料庫明細**

資料庫方面想拿出來說一下，主要本次用的資料庫確實比較新，也就是 tablestore。
####

#### **1）資料庫配置傳遞**

可以看到，我們在初始化應用的時候是填寫了資料庫的公網訪問地址和例項名稱資訊的，初始化的時候會把使用者的輸入配置寫入到 s.yaml 中，這裡如果是比較敏感的資訊建議從 s.yaml 提取出來放到 .env 環境中，並且 ignore 掉這個檔案，減少資料庫資訊被洩露到程式碼倉庫的風險。

最終 Devs 會把這兩個基本資訊放到函式計算的環境變數中然後各執行時可以透過環境變數取到這些值，比如這裡是 nodejs 的執行環境，則透過 process.env.instance 獲取。

除了例項名稱和公網訪問地址外資料庫的初始化還需要 使用者的秘鑰資訊。鑑於秘鑰資訊的敏感性比較高，不建議直接把秘鑰資訊配置到 s.yaml 裡，而是透過給函式服務授權 tablestore 角色許可權，讓函式內建臨時秘鑰資訊。

- 函式服務授權配置如下：

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526103680-5081fea2-f890-41f3-bd47-528c180f36dc.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u39a33115&margin=%5Bobject%20Object%5D&originHeight=796&originWidth=920&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u9e97375e-999b-4dc9-9fd7-24151f5bb2f&title=)

- 函式內獲取秘鑰資訊如下：

![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526103675-433aa721-d60e-4ffc-afbd-e280cd02d8da.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=uf150f6e2&margin=%5Bobject%20Object%5D&originHeight=478&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u7742c135-de11-4f28-92af-2baa5995252&title=)
#### **2）資料庫初始化**

為了減少資料庫初始化次數，我們可以在函式的 initializer 方法中初始化，當函式未被釋放的時候可以直接使用資料庫的例項而不必重新連線。這樣可以降低請求響應時間。單例項多併發的情況下比較實用。

```javascript
exports.initializer = (context, callback) => {
  try {
    const ak = context.credentials.accessKeyId;
    const sk = context.credentials.accessKeySecret;
    const stsToken = context.credentials.securityToken;
    SAT.init(endpoint, instance, ak, sk, stsToken);
    internal = { tableClient: SAT, TableStore };
    callback();
  } catch (err) {
    callback(err.message);
  }
}
```

資料庫例項初始化之後，我們透過賦值給全域性變數來從其他的方法中取得例項，進行後續的操作。

#### **3）CRUD**
****

tablestore 原生的 api 去做 CRUD 操作使用者體驗不夠友好，tablestore 社群提供了一個很好的封裝 SAT。我們用它來做基礎的增刪改查會非常的方便，程式碼看起來也非常整潔。
```javascript

// 單主鍵查詢
const getInterceptor = async (ctx) => {
  const { tableClient } = ctx.req.requestContext.internal;
  const res = await tableClient.table('interceptor').get(1, cols = []);
  return res;
}

// 查詢全部
const getAllEquipment = async (tableClient,TableStore) => {
  const res = await tableClient.table('equipment').getRange(TableStore.INF_MIN, TableStore.INF_MAX, cols = [])
  return Object.keys(res).map((key)=> res[key]);
}
// 雙主鍵（一個分割槽鍵，一個自增鍵）的插入
const addBarrage = async (ctx) => {
  const { tableClient, TableStore } = ctx.req.requestContext.internal;
  const { fromId, fromName, color, fontSize = '28px', checkStatus = 0, message } = ctx.request.body;
  const currentTime = Date.now().toString();
  const newData = Object.assign({}, { fromId, fromName, color, fontSize, checkStatus: parseInt(checkStatus), message }, { sendTime: currentTime, checkTime: currentTime });
  const res = await tableClient.table('barrage', ['gid', 'id']).put([1, TableStore.PK_AUTO_INCR], newData, c = 'I');
  return res;
}
// 更新
const updateBarrage = async (ctx) => {
  const { tableClient } = ctx.req.requestContext.internal;
  const { checkStatus } = ctx.request.body;
  const { id } = ctx.request.params;
  const currentTime = Date.now().toString();
  const res = await tableClient.table('barrage', ['gid', 'id']).update([1, parseInt(id)], { checkStatus: parseInt(checkStatus), checkTime: currentTime }, c = 'I')
  return res;
}
// 條件查詢
const getBarrageByCondition = async (ctx) => {
  const { tableClient, TableStore } = ctx.req.requestContext.internal;
  const res = await tableClient.table('barrage').search('index', ['checkStatus', 0])
  return res;
}
```
當然如果你想做更高階的查詢，就需要自己去查閱[官網文件](https://help.aliyun.com/document_detail/27304.html?spm=5176.54465.J_7985555940.4.15942e0c3qkHbU)了
# 總結**

這個專案本身是對 Serverless 如何使用 websocket 的一個展示示例。你可以把它變成任意相近形態的應用，比如聊天室，多人協作平臺等。

應用本身也還有很多改進空間，比如增加點贊效果，管控部分可以加上管理員的登入註冊等。總之你可以根據自身需求定製更高階的功能，相關的原始碼已經提供出來供大家參考。下個篇章我會繼續跟大家聊一聊 Serverless 和低程式碼的場景，並分享一個我們最近做的實踐。

_**文中涉及網址彙總：**_

Serverless Devs：https:_//github.com/Serverless-Devs_
雲解析DNS：https:_//wanwang.aliyun.com/domain/dns_
API閘道器：https:_//www.aliyun.com/product/apigateway_
函式計算：https:_//www.aliyun.com/product/fc_
物件儲存OSS：https:_//www.aliyun.com/product/oss_
ServerlessDesktop：http:_//www.serverless-devs.com/zh-cn/desktop/index.html_
Serverless Devs Cli：http:_//www.serverless-devs.com/zh-cn/cli/index.html_
Serverless Hub：https:_//serverlesshub.resume.net.cn/#/hubs/specialview_
Tablestore表格儲存：https:_//www.aliyun.com/product/ots_
官網文件：https:_//help.aliyun.com/document_detail/27304.html?spm=5176.54465.J_7985555940.4.15942e0c3qkHbU_
原始碼：https:_//github.com/devsapp/start-barrage_

### _**作者介紹：**_
![](https://intranetproxy.alipay.com/skylark/lark/0/2022/webp/22456429/1641526103688-b1c7945c-a177-4791-b585-4cf025532156.webp#clientId=u95cde78e-5ed6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=131&id=u935de344&margin=%5Bobject%20Object%5D&originHeight=1080&originWidth=1080&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ue32d6aee-8626-4bfa-b201-a2246c0da54&title=&width=131) 
王慶（寒斜）｜阿里云云原生中介軟體前端負責人

2016 年加入阿里中介軟體從事雲產品企業控制檯研發工作，負責中介軟體 20 多款雲產品前端研發工作，主要技術棧為大前端通用技術，目前專注在 Serverless 開發者工具鏈的建設，是雲原生 Serverless Devs 研發負責人之一。

人人都是 Serverless 架構師 | 彈幕應用開發實戰

相關文章