WebSocket 開發實戰，三步實現實時彈幕系統

時間 2020-08-18

標籤 websocket 開發實戰三步實現實時系統简体版

原文原文鏈接

前言

今年疫情的突襲，改變了不少人以往在生活和工做中的方式，視頻會議、協同編輯、在線直播 / 教育等業務場景凸顯重要性。人們經過線上方式，實時的獲取信息、同步信息，以快捷且不受空間限制的形式完成溝通、學習、工做等需求。html

本文將以微信小程序實時彈幕功能爲例，向你們介紹高實時業務場景的功能技術實現過程。前端

實時彈幕功能的技術實現

實現方式對比

短輪詢web

短輪詢是客戶端每隔一段時間向服務器發出請求，服務器端在收到請求後，不管是否有數據更新，都直接進行響應。數據庫

優勢：實現簡單，易於理解，適合異步查詢業務。
缺點：不斷的去請求沒有意義的更新的數據，浪費服務器資源，不適合同時在線用戶多的業務。

長輪詢npm

當服務器收到客戶端發來的請求後，服務器端不會直接進行響應，而是先將這個請求掛起，而後判斷服務器端數據是否有更新。若是有更新，則進行響應，若是一直沒有數據，則到達必定的時間限制才返回。小程序

優勢：減小沒必要要的請求，減小資源浪費，有較好的時效性。
缺點：佔較多的內存資源與請求數。

Server-sent Events(SSE)segmentfault

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

分析

分析需求

知曉雲實時數據庫有一個限制就是必須先登陸，因此咱們在實現視頻彈幕的時候，須要先實現登入登出。

有兩個界面狀態：

未登入：簡單的顯示一個登入按鈕便可。
已登入：會有一個視頻組件、一個輸入框（彈幕內容）、一個按鈕（點擊發送彈幕）、還有對應的登出按鈕。

這樣子就是一個相對完備的應用了。

實現步驟清單

搭建簡單的微信小程序腳手架（用開發者工具建立一個新的應用便可，而後清理一下不用的代碼）
初始化知曉雲 SDK
實現登入登出
實現彈幕效果
實現實時彈幕

關鍵代碼

首先是訂閱一個表的事件：

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 訂閱關係的客戶端。

咱們能夠在微信開發者工具看到小程序界面，輸入彈幕內容，點擊發送彈幕爲數據表新增一條彈幕數據，小程序端便可收到新增的數據行，並進行彈幕顯示。

彈幕小程序界面