使用uniapp实现websocket聊天功能

<script>
  export default {
    onLaunch: function() {
      console.log('App Launch')
    },
    onShow: function() {
      console.log('App Show')
      // 获取用户id（发送者）
      let id = uni.getStorageSync('id')
      // 创建ws连接
      uni.connectSocket({
        url: ''
      });
      // 监听ws打开状态
      uni.onSocketOpen((res) => {
        // console.log(123);
        console.log('连接成功');
        // 绑定发送id
        // ws链接状态
        setInterval(() => {
          console.log(111)
          uni.sendSocketMessage({
            data: JSON.stringify({
              type: `ping`,
            })
          });
        }, 1500);
        console.log('WebSocket连接已打开！');
      });
      
      let ta = this
      // ws监听接受消息
      uni.onSocketMessage((res) => {
        console.log(res.data)
        console.log(JSON.parse(res.data), 'aaaa');
        if (JSON.parse(res.data).type == 'chat') {
          that.data.push({
            ...JSON.parse(res.data)
          })
        }
      });
      uni.onSocketError((res) => {
        console.log('WebSocket连接打开失败，请检查！', res);
        uni.connectSocket({
          url: ''
        });
      });
      uni.onSocketClose((res) => {
        console.log('WebSocket 已关闭！');
        uni.connectSocket({
          url: ''
        });
      });
    },
    onHide: function() {
      console.log('App Hide')
    }
  }
</script>
<style lang="scss">
  /*每个页面公共css */
  @import "@/uni_modules/uview-ui/index.scss";
</style>

<template>
  <view>
    <div style="height: 30rpx"></div>
    <!-- 消息列表 -->
    <div class="big" v-for="(item,index) in data" :key="index" @click="goTalk(item.receive,item.img)">
      <div style="width: 10px"></div>
      <image :src="'http://wcy.jingyi.icu/'+item.img" mode="" class="Ai"></image>
      <div style="width: 10px"></div>
      <div class="contentOne">
        <div style="height: 10px"></div>
        <div class="Tow">
          <p class="text">{{item.name}}</p>
          <p>{{item.addtime}}</p>
        </div>
        <div style="height: 20rpx"></div>
        <div class="titleCon">{{item.content}}</div>
        <div style="height: 10rpx"></div>
      </div>
    </div>
    <u-tabbar :value="value" :placeholder="false" @change="change1" :fixed="true" :safeAreaInsetBottom="false">
      <u-tabbar-item text="首页" icon="home" @click="change"></u-tabbar-item>
      <u-tabbar-item text="消息" icon="chat" :badge="num" @click="change"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<template>
  <view class="chat">
    <scroll-view :style="{height: `${windowHeight-inputHeight}rpx`}" id="scrollview" scroll-y="true"
      :scroll-top="scrollTop" class="scroll-view">
      <!-- 聊天主体 -->
      <view id="msglistview" class="chat-body">
        <!-- 聊天记录 -->
        <view v-for="(item,index) in data" :key="index">
          <!-- <view class="nows_time">
            <view class="am_pm_time">{{item.addtime}}</view>
          </view> -->
          <!-- 自己的内容 -->
          <view class="item self" v-if="item.sender == id">
            <!-- 文字内容 -->
            <view class="content right">
              {{item.content}}
            </view>
            <view class="avatar">
              <image :src="Himg" mode=""></image>
            </view>
          </view>
          <!-- 左侧内容 -->
          <view class="item Ai" v-if="item.sender != id">
            <view class="avatar">
              <image :src="Timg" mode=""></image>
            </view>
            <!-- 文字内容 -->
            <view class="content left">
              {{item.content}}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 防止聊天消息被发送框遮挡 -->
    <view class="chat-bottom" :style="{height: `${inputHeight}rpx`}">
      <view class="send-msg" :style="{bottom:`${keyboardHeight}rpx`}">
        <view class="uni-textarea">
          <textarea v-model="chatMsg" maxlength="300" confirm-type="send" @confirm="handleSend"
            :show-confirm-bar="false" @linechange="sendHeight" auto-height></textarea>
        </view>
        <button @tap="sends" class="send-btn">发送</button>
      </view>
    </view>
  </view>
</template>