goeasy网址:https://www.goeasy.io/cn/doc/client/pub-sub-uniapp.html
1. 使用npm或者yarn安装 goeasy
命令如下:(1).yarn init -y(初始化),(2). yarn add goeasy(安装)
2. main.js导入
(1).import GoEasy from 'goeasy';
(2).
1 // 在main.js里初始化全局的GoEasy对象
2 Vue.prototype.$goEasy = new GoEasy({ 3 host: "hangzhou.goeasy.io", //应用所在的区域地址: 【hangzhou.goeasy.io | singapore.goeasy.io】
4 appkey: "my_appkey", //替换为您的应用appkey
5 onConnected: function() { 6 console.log('连接成功!') 7 }, 8 onDisconnected: function() { 9 console.log('连接断开!') 10 }, 11 onConnectFailed: function(error) { 12 console.log('连接失败或错误!') 13 } 14 });
3 . 在具体页面进行推送与接收 (挺简单的,估计你看看就会了)
注意的一点就是,分发和接收消息都是通过唯一的频道来传输和获取
1 <template>
2 <view class="content">
3 <view v-for="(item, index) in historyList" :key="index">{{ item.content.avatar }} {{ item.content.name }} {{ item.content.time }}</view>
4 <image class="logo" src="/static/logo.png" @click="handleSendMsg"></image>
5 <view class="text-area">
6 <text class="title">{{ msgInfo }}</text>
7 </view>
8 <input type="text" value="" @input="handleMsg" />
9 </view>
10 </template>
11
12 <script>
13 export default { 14 data() { 15 return { 16 title: 'Hello', 17 msgInfo: {}, 18 options: {}, 19 historyList: [] 20 }; 21 }, 22 onLoad(options) { 23 this.options = options; 24 }, 25 onReady() { 26 // 接收(只要初始化一次即可使用)
27 this.$goEasy.subscribe({ 28 channel: '这里填唯一的频道,仅限字符串', //替换为您自己的channel
29 onMessage: message => { 30 this.msgInfo = JSON.parse(message.content); 31 console.log('message', message, this.msgInfo); 32 // console.log('Channel:' + message.channel + ' content:' + message.content);
33 } 34 }); 35 }, 36 methods: { 37 handleSendMsg() { 38 // 高级功能(历史记录按付费获取消息记录,9.9元最近30条)
39 this.$goEasy.history( 40 { 41 channel: '这里填唯一的频道,仅限字符串', //必需项
42 limit: 10 //可选项,返回的消息条数,默认为100条,最多1000条
43 }, 44 response => { 45 if (response.code == 200) { 46 for (let i = 0, len = response.content.messages.length; i < len; i++) { 47 response.content.messages[i].content = JSON.parse(response.content.messages[i].content); 48 } 49 this.historyList = response.content.messages; 50 } 51 } 52 ); 53 }, 54 handleMsg(e) { 55 // 推送的字符串信息
56 let user = { 57 avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/qjhr9gibQNW2iamoLodf7VUJdic7O6Vctxic3YlsIVkrWTtzf9Xic7LkqpILVUWRpQF9Ru8tXDicfrkdTEYoQLiaP42Cw/132', 58 uid: 4, 59 channel: 'YongZhouShi', 60 nickname: 'MLONGTAO', 61 time: '2020-01-20 12:00:10', 62 content: '哈哈哈22222', 63 contentType: 'txt'
64 }; 65
66 // 推送
67 this.$goEasy.publish({ 68 channel: '这里填唯一的字符串,仅限字符串', //替换为您自己的channel
69 message: `${JSON.stringify(user)}` //替换为您想要发送的消息内容
70 }); 71 } 72 } 73 }; 74 </script>
75
76 <style>
77 .content { 78 display: flex; 79 flex-direction: column; 80 align-items: center; 81 justify-content: center; 82 } 83
84 .logo { 85 height: 200rpx; 86 width: 200rpx; 87 margin-top: 200rpx; 88 margin-left: auto; 89 margin-right: auto; 90 margin-bottom: 50rpx; 91 } 92
93 .text-area { 94 display: flex; 95 justify-content: center; 96 } 97
98 .title { 99 font-size: 36rpx; 100 color: #8f8f94; 101 } 102 </style>