1. 程式人生 > 程式設計 >微信小程式使用GoEasy實現websocket實時通訊

微信小程式使用GoEasy實現websocket實時通訊

不需要下載安裝,便可以在微信好友、微信群之間快速的轉發,使用者只需要掃碼或者在微信裡點選,就可以立即執行,有著近似APP的使用者體驗,使得微信小程式成為全民熱愛的好東西~

同時因為微信小程式使用的是Javascript語法,對前端開發人員而言,幾乎是沒有學習成本和技術門檻的。對於大部分場景,都可以使用小程式快速開發實現,不論是開發週期還是開發成本都低的讓人笑哭,所以受到了技術開發團隊的各種追捧~

但如果要在小程式裡快速的實現一個即時通訊功能,就有點尷尬,因為微信官方提供的只是一個底層的websocket api,要在專案中直接使用,還需要做很多額外的工作,比如首先就需要搭建自己的websocket服務~

那有沒有簡單的方式呢? 當然是有的!

今天小編就手把手的教您用GoEasy在微信小程式裡,最短的時間快速實現一個websocket即時通訊Demo。

微信小程式使用GoEasy實現websocket實時通訊

本demo已經完成了真機下的小程式的測試,完整原始碼開源到oschina的碼雲上,clone後,只需要將程式碼裡的appkey換成自己的common key,就可以體驗了,原始碼網址:https://gitee.com/goeasy-io/GoEasyDemo-wxapp-Helloworld

1、獲取appkey

GoEasy官網上註冊賬號,建立一個應用,拿到您的appkey。

微信小程式使用GoEasy實現websocket實時通訊

GoEasy提供了兩種型別的appkey:

  • Common key: 即可以接收訊息,也可以傳送訊息,與Subscribe Key最大的區別就是有寫許可權,可以發訊息。適用於有訊息傳送需求的客戶端和服務端開發。
  • Subscribe key: 只能接收訊息,不可以傳送訊息,與Common Key最大的區別就是沒有寫許可權,只能收訊息。可以用於一些沒有傳送需求的客戶端。

2、獲取GoEasy SDK

下載https://cdn.goeasy.io/download/goeasy-1.0.11.js

import GoEasy from './goeasy-1.0.11';

3、初始化GoEasy物件

var self = this;
this.goeasy = GoEasy({
 host: 'hangzhou.goeasy.io',appkey: "您的appkey",onConnected: function () {
  console.log("GoEasy connect successfully.");
  self.unshiftMessage("連線成功.");
 },onDisconnected: function () {
  console.log("GoEasy disconnected.")
  self.unshiftMessage("連線已斷開.");
 },onConnectFailed: function (error) {
  console.log(error);
  self.unshiftMessage("連線失敗,請檢查您的appkey和host配置");
 }
})

根據您在GoEasy後臺建立應用時選擇的區域,來傳入不同的Host,如果您建立GoEasy應用時,選擇了杭州,那麼host:"hangzhou.goeasy.io"。選擇了新加坡,host:"singapore.goeasy.io"。

如果您的大部分使用者都是在國內,建立應用時,記得選擇杭州,以便獲得更快的通訊速度。

4、小程式端接收訊息

var self = this;
this.goeasy.subscribe({
 channel: "my_channel",onMessage: function (message) {
  self.unshiftMessage(message.content);
 },onSuccess: function () {
  self.unshiftMessage('訂閱成功.');
 }
});

很多朋友會問channel從哪裡來,如何建立,應該傳入什麼呢?

根據您的業務需求來設定,channel可以為任意字串,除了不能包含空格,和不建議使用中文外,沒有任何限制,只需要和訊息的傳送端保持一致,就可以收到訊息。channel可以是您直播間的uuid,也可以是一個使用者的唯一表示符,可以任意定義,channel不需要建立,可以隨用隨棄。

5、小程式端傳送訊息:

傳送時,需要注意channel一定要和subscribe的channel完全一致,否則無法收到。

this.goeasy.publish({
 channel: "my_channel",message: self.data.message,onSuccess: function () {
  self.setData({
   message: ''
  }); //清空傳送訊息內容
  console.log("send message success");
 },onFailed: function (error) {
  self.unshiftMessage('傳送失敗,請檢查您的appkey和host配置.');
 }
});

本程式碼原始碼下載:https://gitee.com/goeasy-io/GoEasyDemo-wxapp-Helloworld

特別強調:

在執行之前,一定要在微信公眾號平臺配置socket合法域名,否則無法建立連線。具體步驟:
訪問mp.weixin.qq.com,進入微信公眾平臺|小程式 -> 設定 -> 開發設定 -> 伺服器域名
socket合法域名-> 新增GoEasy的地址: wx-hangzhou.goeasy.io(記得wx-開頭)
若您建立GoEasy應用時選擇了新加坡區域則新增地址:wx-singapore.goeasy.io

答疑時間:

1、我的伺服器端可以給小程式傳送訊息嗎?都支援些哪些語言?

當然可以,任何語言都可以通過呼叫GoEasy的Rest API傳送訊息,同時為了大家方便,GoEasy的官方文件裡,也準備了Java,C#,NodeJS,PHP,Ruby和Python等常見語言呼叫REST API的程式碼。

2、GoEasy可以傳送圖片,語音和視訊嗎?

當然可以,您可以通過推送檔案路徑的方式來實現檔案的傳送。按照行業慣例,不論MSN,微信,QQ對於圖片和視訊,通常的做法都是,只推送檔案路徑,而不會推送檔案本身。你如果有注意的話,當您接受圖片和視訊的時候,收到訊息後,等一會兒才能看,就是因為傳送的時候,只發送了路徑。

3、GoEasy和微信小程式官方的websocket API有什麼區別和優勢?

小程式官方的websocket API主要是用來與您的websocket服務通訊,所以使用小程式websocket的前提是,首先要搭建好您自己的websocket服務,然後與之通訊。這是一個純技術的API,在建立網路連線後,還有很多的工作需要自己來完成,比如:

  • 需要自己實現心跳機制,來維護網路連線,來判斷客戶端的網路連線狀態;
  • 需要自己實現斷網自動重連;需要自己維護訊息列表,確保遇到斷網重連後,訊息能夠補發;
  • 需要自己維護一個客戶端列表;
  • 等等很多細緻而繁雜的工作,比如websocket的安全機制和效能優化;

此之外服務端也有很多工作需要自己完成,有興趣自己搭建websocket的話,可以參考這篇技術分享《搭建websocket訊息推送服務,必須要考慮的幾個問題》

而GoEasy是一個成熟穩定的企業級websocket PAAS服務平臺,開發人員不需要考慮websocket服務端的搭建,只需要幾行程式碼,就可以輕鬆實現客戶端與客戶端之間,伺服器與客戶端之間的的websocket通訊,不需要考慮效能,安全,高可用叢集的問題,只需要全力專注於開發自己的業務功能就好了。

GoEasy已經內建websocket中必備的心跳,斷網重連,訊息補發,歷史訊息和客戶端上下線提醒等特性,開發人員也不需要自己搭建websocket服務處理叢集高可用,安全和效能問題。GoEasy已經穩定運行了5年,支援千萬級併發,成功支撐過很多知名企業的重要活動,安全性和可靠性都是久經考驗。

4、GoEasy在小程式的開發中主要用在那些場景呢?

從應用場景上來說,所有需要websocket通訊的場景,GoEasy都可以完美支援:

  • 聊天,IM,直播彈幕,使用者上下線提醒,線上使用者列表
  • 掃碼點菜,掃碼登入, 掃碼支付, 掃碼簽到, 掃碼列印
  • 事件提醒,工單,訂單實時提醒
  • 線上拍賣, 線上點餐,線上選座 實時資料展示,實時監控大屏, 金融實時行情顯示,裝置監控系統
  • 實時位置跟蹤,外賣實時跟蹤,物流實時跟蹤
  • 遠端畫板,遠端醫療,遊戲,遠端線上授課

5、GoEasy的文件為什麼這麼簡單?簡單到我都不知道如何使用

簡單還不好嗎?GoEasy從研發的第一天,就把追求API的極簡作為我們的工作重點。嚴格控制介面的數量,就是是為了降低開發人員的學習成本,其實就是為了讓您爽啊!但這並不影響GoEasy完美支援所有的websocket即時通訊需求。

總結

到此這篇關於微信小程式使用GoEasy實現websocket實時通訊的文章就介紹到這了,更多相關微信小程式 GoEasy實時通訊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!