微信雲託管 WebSocket 實戰：基於模版實現訊息推送

CloudBase雲開發發表於2022-01-27
Web

微信雲託管是微信團隊聯合騰訊雲團隊提供的以雲原生為基礎的免運維、高可用服務上雲解決方案，無需伺服器，1分鐘即可部署小程式/公眾號服務端。

PC 端訪問 https://cloud.weixin.qq.com 即可立即開始使用微信雲託管，新使用者首個環境贈送 3 個月免費額度。

一、準備工作

第 1 步：開通

進入 微信雲託管，選擇小程式/公眾號帳戶進行登入。

圖片

第 2 步：部署

目前微信雲託管提供兩種部署方式，無門檻部署以及自定義部署，本文在初始化的時候將採用無門堪方式進行部署；

選擇自己熟悉語言的模版，點選「使用」按鈕，進入下一步,本文將使用Express模版進行自動部署

圖片

雲託管將會根據模版內容進行自動部署，模版中如有依賴資料庫，將會在部署時自動開通資料庫

圖片

部署成功後可直接通過公網域名訪問模版中的應用,並且提供呼叫程式碼片段

圖片

模版中提供的計數器的應用

圖片

二、開始改造

第 1 步：拉取程式碼

官方模版程式碼傳送門：

https://github.com/WeixinCloud/wxcloudrun-express

拉取成功後,目錄檔案如下：

|.dockerignore              
|.gitignore
|container.config.json       
|db.js                      
|Dockerfile                 
|index.html
|index.js
|LICENSE
|package.json
|README.md

第 2 步：使用websocket相關依賴

本文中使用express-ws進行websocket服務搭建

express-ws

第 3 步：改造服務端程式碼

const path = require('path')
const express = require('express')
const cors = require('cors')
const morgan = require('morgan')
const { init: initDB, Counter } = require('./db')

const logger = morgan('tiny')
const app = express();
const expressWs = require('express-ws')(app);
const clients = expressWs.getWss('/').clients
app.ws('/', function (ws, req) { });

app.use(express.urlencoded({ extended: false }))
app.use(express.json())
app.use(cors())
app.use(logger)

// 首頁
app.get('/', async (req, res) => {

  res.sendFile(path.join(__dirname, 'index.html'))
})

// 更新計數
app.post('/api/count', async (req, res) => {
  const { action } = req.body
  if (action === 'inc') {
    await Counter.create()
  } else if (action === 'clear') {
    await Counter.destroy({
      truncate: true
    })
  }
  //資料改變後將結果推送至客戶端   
  for (let c of clients) {
    c.send(await Counter.count())
  }
  res.send({
    code: 0,
    data: await Counter.count()
  })
})

// 獲取計數
app.get('/api/count', async (req, res) => {
  const result = await Counter.count()
  res.send({
    code: 0,
    data: result
  })
})

// 小程式呼叫，獲取微信 Open ID
app.get('/api/wx_openid', async (req, res) => {
  if (req.headers['x-wx-source']) {
    res.send(req.headers['x-wx-openid'])
  }
})



const port = process.env.PORT || 80

async function bootstrap() {
  await initDB()
  app.listen(port, () => {
    console.log('啟動成功', port)
  })
}

bootstrap();

第 4 步：通過流水線(CI/CD)部署改造後程式碼

首先將修改後程式碼上傳到 Gitee/GitHub/GitLab，其中一個託管平臺，進入 微信雲託管服務管理->服務列表->流水線->新建流水線

如程式碼許可權未授權或授權過期，請先完成授權後在進行建立流水線

圖片

新增成功後，點選開始流水線即可觸發部署，也可以通過勾選推送觸發進，程式碼推送到指定倉庫時將會觸發流水線進行程式碼部署

圖片

Tips: 由於當前模版有使用到資料庫，如使用流水線觸發,需將環境變數配置到container.config.json

{
  "containerPort": 80,
  "dockerfilePath": "Dockerfile",
  "buildDir": "",
  "minNum": 0,
  "maxNum": 10,
  "cpu": 1,
  "mem": 2,
  "policyType": "cpu",
  "policyThreshold": 80,
  "envParams": {
    "MYSQL_ADDRESS": "地址",
    "MYSQL_PASSWORD": "密碼",
    "MYSQL_USERNAME": "使用者名稱"
  },
  "customLogs": "stdout",
  "initialDelaySeconds": 2,
  "dataBaseName": "nodejs_demo",
  "executeSQLs": [
    "CREATE DATABASE IF NOT EXISTS nodejs_demo;",
    "USE nodejs_demo;"
  ]
}

第 5 步：編寫小程式端程式碼

小程式基礎庫版本最低要求為2.21.1
const {
      socketTask
    } = await wx.cloud.connectContainer({
      config: {
        env: '', // 替換自己的微信雲託管的環境ID
      },
      service: '', // 替換自己的服務名
      path:'/'
    })
    socketTask.onMessage(function (res) {
      console.log('【WEBSOCKET】', res.data)
    })
    socketTask.onOpen(function (res) {
      console.log('【WEBSOCKET】', '連結成功！')
      setTimeout(() => {
        socketTask.send({
          data: '這是小程式訊息'
        })
      }, 5000);
      
    })
    socketTask.onClose(function (res) {
      console.log('【WEBSOCKET】連結關閉！')
    })

第 6 步：開始除錯

開啟公網訪問連結進行除錯：

圖片

第 7 步：除錯結果

現在可以看到在 web 中使用計數器模版每次點選將會實時傳送到小程式中,到該步驟通過微信雲託管提供的 WebSocket 新能力,實現了實時訊息推送：

圖片

三、總結

以上便是微信雲託管新能力「WebSocket」，基於此新能力可以延伸很多有趣的應用，例如線上聊天室、協同文件、訊息推送等等，加上雲託管的一些其他特性，值得體驗！

作者：Life，雲開發、雲託管高階佈道師。前端開發工程師，熟悉React、Node.js，在小程式、雲開發方面有深入研究，通過雲開發、雲託管開發多套商用小程式，《小程式·雲開發實戰智慧衣櫥小程式》直播課講師。

相關文章