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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM