WebSocket 开发实战，三步实现实时弹幕系统

前言

今年疫情的突袭，改变了不少人以往在生活和工做中的方式，视频会议、协同编辑、在线直播 / 教育等业务场景凸显重要性。人们经过线上方式，实时的获取信息、同步信息，以快捷且不受空间限制的形式完成沟通、学习、工做等需求。

本文将以微信小程序实时弹幕功能为例，向你们介绍高实时业务场景的功能技术实现过程。

实时弹幕功能的技术实现

实现方式对比

短轮询

短轮询是客户端每隔一段时间向服务器发出请求，服务器端在收到请求后，不管是否有数据更新，都直接进行响应。

• 优势：实现简单，易于理解，适合异步查询业务。
• 缺点：不断的去请求没有意义的更新的数据，浪费服务器资源，不适合同时在线用户多的业务。

长轮询

当服务器收到客户端发来的请求后，服务器端不会直接进行响应，而是先将这个请求挂起，而后判断服务器端数据是否有更新。若是有更新，则进行响应，若是一直没有数据，则到达必定的时间限制才返回。

• 优势：减小没必要要的请求，减小资源浪费，有较好的时效性。
• 缺点：占较多的内存资源与请求数。

Server-sent Events(SSE)

SSE 容许服务器推送数据到客户端，不须要创建或保持大量的客户端发往服务器端的请求，能够实现只要服务器端数据有更新，就立刻发送到客户端。

• 优势：实现简单，一个链接能够发送多个数据，节约了不少资源。
• 缺点：兼容性很差（IE，Edge 不支持），服务器只能单向推送数据到客户端。

WebSocket

WebSocket 是一种网络传输协议，支持双向可靠的通讯。首先须要在客户端和服务器端创建起一个链接，这部分须要 http。链接一旦创建，客户端和服务器端就能够相互发送数据，不存在请求和响应的区别。

• 优势：双向通信，节约资源，时效性很是高。
• 缺点：服务器端的逻辑复杂，开发成本高。

实时数据库

实时数据库是知晓云近期推出的重磅基础能力，基于 WebSocket 实现客户端和服务端的实时双向通讯，在云端数据发生变化时立刻通知全部客户端来同步数据，从而改变了以往只能由客户端按需向云端请求或经过定时轮询来刷新数据的单向模式。

实时数据库可让开发者无需投入额外的开发资源，即可轻松、快速的搞定实时性高的业务场景。对于社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议 / 聊天、基于位置的应用、在线教育、智能家居等场景都颇有帮助。

开发过程

准备

• 注册一个微信小程序

  • https://mp.weixin.qq.com/

• 注册一个知晓云帐号，并创一个知晓云应用

  • https://cloud.minapp.com/

ps：在左侧栏找到「设置」，选项「应用」能够找到开发者 ID，用于知晓云 SDK 初始化。

安装

目前支持的版本 3.14.0-beta.2 及以上。

• 经过 npm 安装：npm install minapp-sdk
• 经过文件下载：https://doc.minapp.com/js-sdk/download-sdk.html

分析

1. 分析需求

知晓云 实时数据库有一个限制就是必须先登陆，因此咱们在实现视频弹幕的时候，须要先实现登入登出。

有两个界面状态：

• 未登入：简单的显示一个登入按钮便可。
• 已登入：会有一个视频组件、一个输入框（弹幕内容）、 一个按钮（点击发送弹幕）、还有对应的登出按钮。

这样子就是一个相对完备的应用了。

1. 实现步骤清单

• 搭建简单的微信小程序脚手架（用开发者工具建立一个新的应用便可，而后清理一下不用的代码）
• 初始化知晓云 SDK
• 实现登入登出
• 实现弹幕效果
• 实现实时弹幕

1. 关键代码

首先是订阅一个表的事件 ：

const Danmu = new BaaS.TableObject('danmu')const subscription = MyTable.subscribe('create', {  
  oninit: () => {
    console.log('订阅成功')  
  },  
  onerror: error => {    
    console.log('订阅失败', error)  
  },  
  onevent: ({after}) => {
    console.log('接收到知晓云推送过来的消息', after)    // 这个时候就能够调用小程序视频组件的 API 产生弹幕效果  
  },
})

每次订阅都会返回一个订阅关系对象 subscription，使用者能够在特定时机调用 subscription.unsubscribe() 取消订阅。好比说小程序页面加载的时候发起订阅，页面销毁的时候取消订阅（网页端，刷新的时候不须要主动调用取消订阅也会取消订阅）。

而后，能够向这个表写入一 条 数据：数据将写到知晓云，知晓云再 将 数据的变化推送到全部跟这张表创建了 create 订阅关系的客户端。

咱们能够在微信开发者工具看到小程序界面，输入弹幕内容，点击发送弹幕为数据表新增一条弹幕数据，小程序端便可收到新增的数据行，并进行弹幕显示。

弹幕小程序界面

以上是实时弹幕功能的技术实现过程，如需观看视频教学，请访问：

https://www.bilibili.com/video/BV1hz4y1Q7cC/

参考材料

• 知晓云 API

  • 初始化

    • https://doc.minapp.com/js-sdk/quick-start.html

  • 获取当前用户

    • https://doc.minapp.com/js-sdk/account.html

  • 登入

    • https://doc.minapp.com/js-sdk/wechat/signin-signout.html

  • 登出

    • https://doc.minapp.com/js-sdk/auth.html

  • 新增数据记录

    • https://doc.minapp.com/js-sdk/schema/create-record.html

  • 实时数据库（WebSocket）

    • https://doc.minapp.com/js-sdk/schema/websocket.html

• 微信小程序 API

  • 视频组件

    • https://developers.weixin.qq.com/miniprogram/dev/component/video.html

知晓云

知晓云成立于 2017 年 8 月 8 日，是国内首家专一于小程序开发的后端云服务，为以小程序为表明的大前端开发者提供最低门槛的 Serverless 无服务架构接入体验。

它免去了小程序等大前端开发中服务器搭建、域名备案、数据接口实现等繁琐流程。让开发者专一于业务逻辑的实现，使用知晓云开发小程序、app、网站，门槛更低，效率更高。

👉查看知晓云三周年活动，领取福利