UNIAPP - 实时通讯(goeasy)
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>
