UNIAPP

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      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>
原文地址:https://www.cnblogs.com/cisum/p/13863691.html