react websocket實現消息推送

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

試用過后，總的來說效果不錯，根據網站提供的教程，上手還是很快的。

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

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

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

1、 引入 GoEasy：

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

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

或

npm install –save goeasyimport GoEasy from ‘goeasy’;

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

import GoEasy from ‘./goeasy-1.0.3’;

　　

2、初始化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中的收發消息測試。

3、react端接收消息：

import g from './global.js'

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

 

4、react端發送消息：

import g from './global.js'

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

 

5、服務端推送消息：

在 實際開發過程中，我們更多的會是從服務器端往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等多種服務端語言的支持。