react websocket實現消息推送

最近在作項目的過程當中，須要用到websocket來實現消息推送的功能，百度了一下，找到一個免費的websocket第三方框架【GoEasy】，地址：https://www.goeasy.io/

試用事後，總的來講效果不錯，根據網站提供的教程，上手仍是很快的。

根據GoEasy網站的介紹，目前提供完整的websocket先後端解決方案，簡單的幾行代碼集成，便可快速搭建您的專屬websocket服務。

同時GoEasy還支持更多的前端技術框架好比小程序、react、vue、uniapp等。同時仍是支持php、java、python等服務端語言。

接下來咱們看看在react中如何使用GoEasy實現websocket消息推送：

一、 引入 GoEasy：

目前GoEasy提供三種方式的引入，你能夠根據實際項目的需求進行選擇引入方式。

<script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.0.3.js"></script>

//若是須要支持低版本的IE6,IE7,IE8瀏覽器，請引入json2.js。
<script type="text/javascript" src="https://cdn.goeasy.io/json2.js"></script>

或

npm install --save goeasy

import GoEasy from 'goeasy';

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

import GoEasy from './goeasy-1.0.3';

 

二、初始化GoEasy：

建立一個global.js全局變量存儲文件，放在項目的根目錄。

// global.js
export default {
    goEasy: null
}

import g from './global.js'

//在index.js裏初始化全局GoEasy對象
g.goEasy = new GoEasy({
    host:'hangzhou.goeasy.io', //應用所在的區域地址: 【hangzhou.goeasy.io |singapore.goeasy.io】
    appkey: "my_appkey", //替換爲您的應用appkey
    onConnected: function() {
        console.log('鏈接成功！')
    },
    onDisconnected: function() {
        console.log('鏈接斷開！')
    },
    onConnectFailed: function(error) {
        console.log('鏈接失敗或錯誤！')
    }
});

到此，咱們已在react中完成了GoEasy服務的引入，接下來咱們要進行在react中的收發消息測試。

三、react端接收消息：

import g from './global.js'

g.goEasy.subscribe({
channel: "my_channel", //替換爲您本身的channel
onMessage: function (message) {
console.log("Channel:" + message.channel + " content:" + message.content);
}
});

四、react端發送消息：

import g from './global.js'

g.goEasy.publish({
channel: "my_channel", //替換爲您本身的channel
message: "Hello, GoEasy!" //替換爲您想要發送的消息內容
});

五、服務端推送消息：

在 實際開發過程當中，咱們更多的會是從服務器端往react端發送消息。針對這樣的使用場景，GoEasy提供了豐富的服務端Rest API接口，免去了自行搭建websocket服務器的麻煩。經過GoEasy提供的Rest API接口，你能夠方便快捷的推送消息到react端。

URL:http(s)://<REST Host>/publish

在使用Rest API的過程當中，請根據您的應用所在區域，替換<REST Host>，杭州：rest-hangzhou.goeasy.io，新加坡：rest-singapore.goeasy.io。

Method:Post

參數：

名稱	必要	描述
appkey	是	您的appkey
channel	是	channel
content	是	您要發送的消息內容

更多關於Rest API的使用技巧，能夠來這裏看看：GoEasy服務器發送消息，GoEasy提供了php、java、python等多種服務端語言的支持。