转换表情

main.js

@@ -5,13 +5,14 @@ import uView from "uview-ui";
 import store from "./store";
 import config from '@/config/config';
 import airBtn from "@/components/m-airbtn/index.vue";
+import socketIO from './pages/mine/im/socket';
 /**
  * 仅在h5中显示唤醒app功能
  * 在h5页面手动挂载
  * 
  */
 // #ifdef H5
-if(config.enableMiniBarStartUpApp){
+if (config.enableMiniBarStartUpApp) {
   let btn = Vue.component("airBtn", airBtn); //全局注册
   document.body.appendChild(new btn().$mount().$el);
 }
@@ -31,6 +32,7 @@ Object.keys(filters).forEach((key) => {
 
 // 引入Vuex
 Vue.prototype.$store = store;
+// Vue.prototype.socketIo = new socketIO();
 Vue.use(uView);
 Vue.config.productionTip = false;
 

pages/mine/im/index.vue

@@ -19,7 +19,10 @@
             <view>
               <view class="user-name">{{ user.nickName }}</view>
               <view class="margin-left padding-chat bg-user-orang" style="border-radius: 35rpx; ">
-                <text style="word-break: break-all;" v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
+                <text style="word-break: break-all;"
+                  v-if="item.messageType === 'MESSAGE' && !emojistwo.includes(item.text)">{{ item.text }}</text>
+                <view v-if="item.messageType === 'MESSAGE' && emojistwo.includes(item.text)"
+                  v-html="textReplaceEmoji(item.text)"></view>
                 <view v-if="item.messageType == 'GOODS'">
                   <view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; ">
                     <view class="imagebox" @click="jumpGoodDelic(item)">
@@ -73,7 +76,10 @@
             <view>
               <view class="other-name">{{ toUser.name }}</view>
               <view class="margin-left padding-chat flex-column-start bg-to-color" style="border-radius: 35rpx;">
-                <text style="word-break: break-all;" v-if="item.messageType === 'MESSAGE'">{{ item.text }}</text>
+                <text style="word-break: break-all;"
+                  v-if="item.messageType === 'MESSAGE' && !emojistwo.includes(item.text)">{{ item.text }}</text>
+                <view v-if="item.messageType === 'MESSAGE' && emojistwo.includes(item.text)"
+                  v-html="textReplaceEmoji(item.text)"></view>
                 <view v-if="item.messageType === 'GOODS'">
                   <view class="goodsCard u-flex u-row-between u-p-b-0" style="width:100%;margin: 0 0; ">
                     <view class="imagebox" @click="jumpGoodDelic(item)">
@@ -204,6 +210,7 @@ import {
   beautifyTime
 } from "@/utils/filters.js"
 import config from '@/config/config.js'
+import { textReplaceEmoji, emojistwo } from '@/utils/emojis.js';
 export default {
   // 页面卸载后清除imGoodId
   onUnload () {
@@ -216,7 +223,8 @@ export default {
     }
   },
   onLoad (options) {
-    this.sokcet();
+    console.log(5555555555555555);
+    console.log(emojistwo);
     // 没有goodsid则不显示 发送商品弹窗
     this.showHideModel = options.goodsid
     // 发送后刷新页面不显示 发送商品弹窗 local里面imGoodId不为空显示
@@ -278,6 +286,8 @@ export default {
 
   data () {
     return {
+      textReplaceEmoji,
+      emojistwo,
       socketOpen: false, //是否连接
       storage,
       fixed: 'fixed',
@@ -400,17 +410,21 @@ export default {
         uni.onSocketOpen(function (res) {
           _this.socketOpen = true;
         });
+        if (!this.socketOpen) {
           // 监听连接失败
           uni.onSocketError(function (err) {
+            let count = 0;
+            if (count < 3) {
               if (err && err.code !== 1000) {
-            setTimeout(function () {
                 _this.socketOpen = true;
                 uni.connectSocket({
                   url: url,
                 });
-            }, 5 * 1000)
+                count = count + 1
+              }
             }
           });
+        }
         // 监听连接关闭
         uni.onSocketClose(function (err) {
           if (err && err.code !== 1000) {
@@ -424,8 +438,15 @@ export default {
         });
         // 监听收到信息
         uni.onSocketMessage(function (res) {
-          console.log(res.data, 'resresresresresres');
+          console.log(res.data);
-          uni.hideLoading()
+          res.data = JSON.parse(res.data)
+          console.log(res.data.result);
+          if (res.data.messageResultType == 'MESSAGE') {
+            _this.msgList.push(res.data.result)
+            console.log(_this.msgList)
+          }
+          console.log(res.data)
+          _this.msgGo()
         })
       } catch (e) {
 

pages/mine/im/socket.js

@@ -0,0 +1,166 @@
+import config from '@/config/config.js'
+import storage from '@/utils/storage';
+class socketIO {
+  constructor(data, time, url) {
+    this.socketTask = null
+    this.is_open_socket = false //避免重复连接
+    this.url = config.baseWsUrl + '/' + storage.getAccessToken()  //连接地址
+    this.data = data ? data : null
+    this.connectNum = 1 // 重连次数
+    this.traderDetailIndex = 100 // traderDetailIndex ==2 重连
+    this.accountStateIndex = 100 // traderDetailIndex ==1 重连
+    this.followFlake = false // traderDetailIndex == true 重连
+    //心跳检测
+    this.timeout = time ? time : 15000 //多少秒执行检测
+    this.heartbeatInterval = null //检测服务器端是否还活着
+    this.reconnectTimeOut = null //重连之后多久再次重连
+  }
+  // 进入这个页面的时候创建websocket连接【整个页面随时使用】
+  connectSocketInit (data) {
+    this.data = data
+    this.socketTask = uni.connectSocket({
+      url: this.url,
+      success: () => {
+        console.log("正准备建立websocket中...");
+        // 返回实例
+        return this.socketTask
+      },
+    });
+    this.socketTask.onOpen((res) => {
+      this.connectNum = 1
+      console.log("WebSocket连接正常！");
+      this.send(data)
+      clearInterval(this.reconnectTimeOut)
+      clearInterval(this.heartbeatInterval)
+      this.is_open_socket = true;
+      this.start();
+      // 注：只有连接正常打开中 ，才能正常收到消息
+      this.socketTask.onMessage((e) => {
+        // 字符串转json
+        let res = JSON.parse(e.data);
+        console.log("res---------->", res) // 这里 查看 推送过来的消息
+        if (res.data) {
+          uni.$emit('getPositonsOrder', res);
+        }
+      });
+    })
+    // 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
+    uni.onSocketError((res) => {
+      console.log('WebSocket连接打开失败，请检查！');
+      this.socketTask = null
+      this.is_open_socket = false;
+      clearInterval(this.heartbeatInterval)
+      clearInterval(this.reconnectTimeOut)
+      uni.$off('getPositonsOrder')
+      if (this.connectNum < 6) {
+        uni.showToast({
+          title: `WebSocket连接失败，正尝试第${this.connectNum}次连接`,
+          icon: "none"
+        })
+        this.reconnect();
+        this.connectNum += 1
+      } else {
+        uni.$emit('connectError');
+        this.connectNum = 1
+      }
+    });
+    // 这里仅是事件监听【如果socket关闭了会执行】
+    this.socketTask.onClose(() => {
+      console.log("已经被关闭了-------")
+      clearInterval(this.heartbeatInterval)
+      clearInterval(this.reconnectTimeOut)
+      this.is_open_socket = false;
+      this.socketTask = null
+      uni.$off('getPositonsOrder')
+      if (this.connectNum < 6) {
+        this.reconnect();
+      } else {
+        uni.$emit('connectError');
+        this.connectNum = 1
+      }
+    })
+  }
+  // 主动关闭socket连接
+  Close () {
+    if (!this.is_open_socket) {
+      return
+    }
+    this.socketTask.close({
+      success () {
+        uni.showToast({
+          title: 'SocketTask 关闭成功',
+          icon: "none"
+        });
+      }
+    });
+  }
+  //发送消息
+  send (data) {
+    console.log("data---------->", data);
+    // 注：只有连接正常打开中 ，才能正常成功发送消息
+    if (this.socketTask) {
+      this.socketTask.send({
+        data: JSON.stringify(data),
+        async success () {
+          console.log("消息发送成功");
+        },
+      });
+    }
+  }
+  //开启心跳检测
+  start () {
+    this.heartbeatInterval = setInterval(() => {
+      this.send({
+        "traderid": 10260,
+        "type": "Ping"
+      });
+    }, this.timeout)
+  }
+  //重新连接
+  reconnect () {
+    //停止发送心跳
+    clearInterval(this.heartbeatInterval)
+    //如果不是人为关闭的话，进行重连
+    if (!this.is_open_socket && (this.traderDetailIndex == 2 || this.accountStateIndex == 0 || this
+      .followFlake)) {
+      this.reconnectTimeOut = setInterval(() => {
+        this.connectSocketInit(this.data);
+      }, 5000)
+    }
+  }
+  /**
+   * @description 将 scoket 数据进行过滤
+   * @param {array} array
+   * @param {string} type 区分 弹窗 openposition 分为跟随和我的
+   */
+  arrayFilter (array, type = 'normal', signalId = 0) {
+    let arr1 = []
+    let arr2 = []
+    let obj = {
+      arr1: [],
+      arr2: []
+    }
+    arr1 = array.filter(v => v.flwsig == true)
+    arr2 = array.filter(v => v.flwsig == false)
+    if (type == 'normal') {
+      if (signalId) {
+        arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
+        return arr1
+      } else {
+        return arr1.concat(arr2)
+      }
+    } else {
+      if (signalId > 0) {
+        arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
+        obj.arr1 = arr1
+      } else {
+        obj.arr1 = arr1
+      }
+      obj.arr2 = arr2
+      return obj
+    }
+  }
+}
+export {
+  socketIO
+}

utils/emojis.js

@@ -0,0 +1,145 @@
+/**
+ * 动态表情
+ */
+const emojis = {
+  "[微笑]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif'>",
+  "[撇嘴]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif'>",
+  "[色]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif'>",
+  "[发呆]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/3.gif'>",
+  "[得意]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/4.gif'>",
+  "[流泪]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/5.gif'>",
+  "[害羞]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/6.gif'>",
+  "[闭嘴]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/7.gif'>",
+  "[睡]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/8.gif'>",
+  "[大哭]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/9.gif'>",
+  "[尴尬]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/10.gif'>",
+  "[发怒]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/11.gif'>",
+  "[调皮]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/12.gif'>",
+  "[呲牙]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/13.gif'>",
+  "[惊讶]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/14.gif'>",
+  "[难过]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/15.gif'>",
+  "[酷]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/16.gif'>",
+  "[冷汗]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/17.gif'>",
+  "[抓狂]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/18.gif'>",
+  "[吐]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/19.gif'>",
+  "[偷笑]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/20.gif'>",
+  "[可爱]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/21.gif'>",
+  "[白眼]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/22.gif'>",
+  "[傲慢]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/23.gif'>",
+  "[饥饿]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/24.gif'>",
+  "[困]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/25.gif'>",
+  "[惊恐]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/26.gif'>",
+  "[流汗]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/27.gif'>",
+  "[憨笑]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/28.gif'>",
+  "[大兵]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/29.gif'>",
+  "[奋斗]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/30.gif'>",
+  "[咒骂]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/31.gif'>",
+  "[疑问]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/32.gif'>",
+  "[嘘]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/33.gif'>",
+  "[晕]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/34.gif'>",
+  "[折磨]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/35.gif'>",
+  "[衰]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/36.gif'>",
+  "[骷髅]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/37.gif'>",
+  "[敲打]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/38.gif'>",
+  "[再见]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/39.gif'>",
+  "[擦汗]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/40.gif'>",
+  "[抠鼻]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/41.gif'>",
+  "[鼓掌]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/42.gif'>",
+  "[糗大了]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/43.gif'>",
+  "[坏笑]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/44.gif'>",
+  "[左哼哼]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/45.gif'>",
+  "[右哼哼]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/46.gif'>",
+  "[哈欠]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/47.gif'>",
+  "[鄙视]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/48.gif'>",
+  "[委屈]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/49.gif'>",
+  "[快哭了]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/50.gif'>",
+  "[阴险]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/51.gif'>",
+  "[亲亲]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/52.gif'>",
+  "[吓]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/53.gif'>",
+  "[可怜]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/54.gif'>",
+  "[菜刀]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/55.gif'>",
+  "[西瓜]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/56.gif'>",
+  "[啤酒]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/57.gif'>",
+  "[篮球]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/58.gif'>",
+  "[乒乓]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/59.gif'>",
+  "[咖啡]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/60.gif'>",
+  "[饭]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/61.gif'>",
+  "[猪头]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/62.gif'>",
+  "[玫瑰]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/63.gif'>",
+  "[凋谢]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/64.gif'>",
+  "[示爱]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/65.gif'>",
+  "[爱心]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif'>",
+  "[心碎]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/67.gif'>",
+  "[蛋糕]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/68.gif'>",
+  "[闪电]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/69.gif'>",
+  "[炸弹]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/70.gif'>",
+  "[刀]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/71.gif'>",
+  "[足球]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/72.gif'>",
+  "[瓢虫]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/73.gif'>",
+  "[便便]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/74.gif'>",
+  "[月亮]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/75.gif'>",
+  "[太阳]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/76.gif'>",
+  "[礼物]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/77.gif'>",
+  "[拥抱]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/78.gif'>",
+  "[强]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/79.gif'>",
+  "[弱]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/80.gif'>",
+  "[握手]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/81.gif'>",
+  "[胜利]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/82.gif'>",
+  "[抱拳]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/83.gif'>",
+  "[勾引]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/84.gif'>",
+  "[拳头]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/85.gif'>",
+  "[差劲]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/86.gif'>",
+  "[爱你]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/87.gif'>",
+  "[NO]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/88.gif'>",
+  "[OK]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/89.gif'>",
+  "[爱情]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/90.gif'>",
+  "[飞吻]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/91.gif'>",
+  "[跳跳]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/92.gif'>",
+  "[发抖]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/93.gif'>",
+  "[怄火]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/94.gif'>",
+  "[转圈]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/95.gif'>",
+  "[磕头]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/96.gif'>",
+  "[回头]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/97.gif'>",
+  "[跳绳]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/98.gif'>",
+  "[挥手]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/99.gif'>",
+  "[激动]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/100.gif'>",
+  "[街舞]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/101.gif'>",
+  "[献吻]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/102.gif'>",
+  "[左太极]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/103.gif'>",
+  "[右太极]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/104.gif'>",
+};
+
+/**
+* 符号表情
+*/
+const symbol = [
+  "😠", "😩", "😲", "😞", "😵", "😰", "😒", "😍", "😤", "😜", "😝", "😋", "😘", "😚", "😷",
+  "😳", "😃", "😅", "😆", "😁", "😂", "😊", "☺", "😄", "😢",
+  "😭", "😨", "😣", "😡", "😌", "😖", "😔", "😱", "😪", "😏", "😓", "😥", "😫", "😉",
+  "✊", "✋", "✌", "👊", "👍", "☝", "👆", "👇", "👈", "👉",
+  "👋", "👏", "👌", "👎"
+];
+
+const emojisKeys = Object.keys(emojis);
+
+export const emojiList = {
+  symbol,
+  emojis
+}
+
+const regEmoji = emojisKeys.map((value) => '|\\' + value).join('').replace('|', '')
+
+/**
+* 替换表情文字
+* 
+* @param {String} content 需要替换的字符串
+*/
+export function textReplaceEmoji (content) {
+  if (!content) {
+    return ""
+  }
+  return content.replace(new RegExp(`(${regEmoji})`, 'gi'), ($0, $1) => {
+    return emojis[$1];
+  });
+}
+export const emojistwo = Object.keys(emojis)