关于云托管:微信云托管-WebSocket-实战基于模版实现消息推送

微信云托管是微信团队联结腾讯云团队提供的以云原生为根底的免运维、高可用服务上云解决方案，无需服务器，1 分钟即可部署小程序 / 公众号服务端。

PC 端拜访 https://cloud.weixin.qq.com 即可立刻开始应用微信云托管，新用户首个环境赠送 3 个月收费额度。

进入微信云托管，抉择小程序 / 公众号帐户进行登录。

目前微信云托管提供两种部署形式，无门槛部署以及自定义部署，本文在初始化的时候将采纳无门堪形式进行部署；

抉择本人相熟语言的模版，点击「应用」按钮，进入下一步, 本文将应用 Express 模版进行主动部署

云托管将会依据模版内容进行主动部署，模版中如有依赖数据库，将会在部署时主动开明数据库

部署胜利后可间接通过公网域名拜访模版中的利用, 并且提供调用代码片段

模版中提供的计数器的利用

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

拉取胜利后, 目录文件如下：

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

本文中应用 express-ws 进行 websocket 服务搭建

express-ws

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();

首先将批改后代码上传到 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;"]
}

小程序根底库版本最低要求为 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】链接敞开！')
    })

关上公网拜访链接进行调试：

当初能够看到在 web 中应用计数器模版每次点击将会实时传送到小程序中, 到该步骤通过微信云托管提供的 WebSocket 新能力, 实现了实时音讯推送：

以上便是微信云托管新能力「WebSocket」，基于此新能力能够延长很多乏味的利用，例如线上聊天室、协同文档、音讯推送等等，加上云托管的一些其余个性，值得体验！

作者：Life，云开发、云托管高级布道师。前端开发工程师，相熟 React、Node.js，在小程序、云开发方面有深入研究，通过云开发、云托管开发多套商用小程序，《小程序·云开发实战智慧衣橱小程序》直播课讲师。

关于云托管:微信云托管-WebSocket-实战基于模版实现消息推送

一、筹备工作

第 1 步：开明

第 2 步：部署

二、开始革新

第 1 步：拉取代码

官网模版代码传送门：

第 2 步：应用 websocket 相干依赖

第 3 步：革新服务端代码

第 4 步：通过流水线 (CI/CD) 部署革新后代码

第 5 步：编写小程序端代码

第 6 步：开始调试

第 7 步：调试后果

三、总结