小程序实时聊天socket

项目背景：小程序直播平台上显示实时聊天
技术站：小程序API

首先对于不了解webSocket的来个简单的介绍，因为http协议只能由客户端发送请求，服务端收到请求之后返回相应结果，而且是一个客户端对应一个服务端，所以对于现在好多的实时聊天是不合适的，想一下，如果你发送了一条消息，服务端收到消息后又给你返回你发送成功了，而且你只能跟一个人聊天不能接受好多人的消息，所以出现了wss协议，使用webSocket技术可以使这个功能实现，详情请参照这里

切入正题：

需求：首先进入页面要显示10条最新的聊天记录，如果记录比较多就显示加载更多，然后加载出更多的消息内容，然后输入内容发送出内容到页面上

看代码：
HTML：

// 获取到最新的消息循环显示
<view wx:for="{{chatList.data}}" wx:key="index">
  <text class='user'>{{item.nickname}}：</text>
  <text class='user-content'>{{item.content}}</text>
</view>
// 用户自己发送的内容
<view wx:for="{{UserChatList}}" wx:key="index" wx:if="{{isUser}}">
  <text class='user' wx:if="{{item.nickname}}">{{item.nickname}}：</text>
  <text class='user-content'>{{item.content}}</text>
</view>
// 是否显示加载更多
<view class='more' bindtap='getMoreChatList' wx:if="{{isShowMore}}">加载更多</view>
// socket是否链接的提示（有无都可以）
<text wx:if="{{isOpen}}" style='font-size:30rpx;padding-left:30rpx'>{{statusMsg}}</text>
// 用户发送信息的输入框
<view class='user-input' style="font-size:0">
  <input bindinput='bindContent' type='text' class='input' value="{{input_value_content}}"/>
  <text bindtap="handleSendMessage" class='send'>发送</text>
</view>

css代码不贴了，简单的写样式

Page({

  /**
   * 页面的初始数据
   * 
   * 
   */
  data: {
    resource_id: '',
    book_id: '',
    content: '',
    chatList: '',
    is_content_chat: true,
    isShowMore: false,
    isOpen: false,
    statusMsg: '已断开',
    input_value_content:'',
    UserChatList: [],
    isUser: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    this.setData({
      resource_id: options.resource_id,
      book_id: options.book_id,
      is_content_chat: true,
      isShowMore: false,
      input_value_content: '',
      UserChatList: [],
      isUser: false,
      isOpen: false
    })

    this.data.resource_id = options.resource_id;

    this.wssInit()
  },
  // 获取直播聊天列表
  handleGetChatList () {
    getChatList({
      token: wx.getStorageSync('token'),
      resource_id: this.data.resource_id,
      book_id: this.data.book_id
    }).then(res => {
      if (res.data.length > 9) {
        this.setData({
          isShowMore: true,
          chatList: res,
          isOpen: false,
        })
      } else {
        this.setData({
          chatList: res,
          isShowMore: false,
          isOpen: false,
        })
      }
    }).catch(err => {
      Event.initShowToast(err, this);
    })
  },
  // // 下拉获取更多聊天记录
  getMoreChatList() {
    getChatList({
      token: wx.getStorageSync('token'),
      resource_id: this.data.resource_id,
      book_id: this.data.book_id,
      page_index: 0,
      page_size: 10,
      start_id: this.data.chatList.min_id
    }).then(res => {
      // 把之前得到的聊天数据和重新加载的拼接在一起
      res.data.forEach(item => {
        this.data.chatList.data.push(item)
      })
      this.data.chatList.min_id = res.min_id;
      this.setData({
        chatList: this.data.chatList,
      })
    }).catch(err => {
      Event.initShowToast(err, this);
    })
  },
  wssInit () {
    var that = this;
    this.connectWss();
    // 链接失败显示
    wx.onSocketError(function (res) {
      console.log('WebSocket连接打开失败，请检查！', res);
      that.setData({
        isOpen: false,
        statusMsg: '已断开'
      });
    });
    // 监听连接成功
    wx.onSocketOpen(function (res) {
      console.log('WebSocket连接已打开！')
      that.setData({
        isOpen: true,
        statusMsg: '已连接'
      });
      that.handleGetChatList()
      wx.onSocketMessage(function (res) {
        console.log('收到服务器内容：', res);
        var res_data = JSON.parse(res.data);
        if (res_data.errcode > 0) {
          wx.showToast({
            title: '内容涉及敏感信息！',
            icon: 'none',
            duration: 2000
          })
        }
        console.log(res_data)
        if (!res_data.msg) {
          that.data.UserChatList.push(res_data)
          that.setData({
            isUser: true,
            UserChatList: that.data.UserChatList
          })
        }      
      });
      wx.sendSocketMessage({
        data: JSON.stringify({
          token: wx.getStorageSync('token'),
          resource_id: that.data.resource_id,
          book_id: that.data.book_id,
        }),
        success: res => {
          console.log(res+'发送成功')
        },
        fail: err=> {
          console.log(err+'失败')
        }
      });
    })
  },
  // 向服务器发送消息
  handleSendMessage: function () {
    var that = this;
    console.log('尝试向服务器发送消息：');
    connect()
    if (that.data.content.trim() == '') {
      wx.showToast({
        title: '内容不能为空！',
        icon: 'none',
        duration: 2000
      })
      return;
    }
    wx.sendSocketMessage({
      data: JSON.stringify({content:that.data.content}),
      success: res => {
        that.setData({
          input_value_content: ''
        })      
      }
    });
    // wx.onSocketClose(function (res) {
    //   console.log('WebSocket 已关闭！')
    // })
  },
  connectWss: function () {
    this.setData({
      statusMsg: '连接中。。。'
    });
    connect();
  },
})
function connect() {
  wx.connectSocket({
    url: 'wss://api.tl100.com/wss',
    success: function (res) {
      console.log('连接成功');
    }
  });
}

好了，代码就这些，到此已经可以实现实时聊天的效果了

1.文章有很多不足，如果哪里写的不对欢迎指正
2.您的支持就是对我最大的鼓励

小程序实时聊天socket

猜你喜欢