vue使用云信实时通信(聊天室)

首先下载云信sdk (云信SDK下载地址)
在需要用到的页面引入sdk 例如：import SDK from ‘@/utils/NIM_Web_SDK_v7.5.0’

html方面(只拿了关于聊天室的代码)

    <div
      class="aside-chart-info"
      ref="chatContent"
    >
      <div
        class="userItem"
        v-for="(item, index) in messageArr"
        :key="index"
      >
        <p
          v-if="item.type === 'text'"
          style="padding-left: 7px;margin:0;"
        >
          <span class="userNick">{{ item.nick }}：</span>
          <span class="userText">{{ item.text }}</span>
        </p>
      </div>
    </div>

初始化数据

data() {
	return {
		chatroomInstance: null,
		messageArr: [],//聊天室信息
		appLive: {},//参数信息
	}
}

js

connectSDK(){ //连接sdk
	this.appLive = (调用后端接口获取聊天室用户信息)
	this.appLive.resRoomId= (根据情况调用接口获取聊天室id)
	
	let CurTime = Date.parse(new Date()) / 1000
    let Nonce = 413514513512569
	let data = { //聊天室所需要的参数
        AppKey: this.appLive.appkey,
        Nonce: Nonce,
        CurTime: CurTime,
        CheckSum:（SHA1 Nonce + CurTime)拼接的字符串，进行SHA1哈希计算，转化成16进制字符(String，小写)）
        roomid: this.appLive.chatRoomId,
        accid: this.appLive.neteaseUserAccount,
      }
    let resRoom = （调用云信接口--获取聊天室地址）
    this.chatroomInstance = SDK.Chatroom.getInstance({
        appKey: this.appLive.appkey, //在云信管理后台查看应用的 appKey
        account: this.appLive.neteaseUserAccount, //帐号, 应用内唯一
        token: this.appLive.neteaseUserToken, //帐号的 token,
        chatroomId: this.appLive.chatRoomId, //聊天室id
        chatroomAddresses: resRoom.addr, //聊天室地址
        db: true, //若不要开启数据库请设置false。SDK默认为true。
        onconnect: this.onConnect, //成功的回调
        onwillreconnect: this.onWillreconnect, //即将重连的回调
        ondisconnect: this.onDisconnect, //断开连接
        onerror: this.onError, //error
        onmsgs: this.onMsg, //收到消息
    })
}
onConnect(obj) {
  //连接上服务器
  this.chatroomInstance.getHistoryMsgs({
    //获取聊天室
    done: this.getHistoryMsgsDone,
    limit: 100,
    timetag: new Date().getTime(),
    msgTypes: ['text'],
  })
},
onWillreconnect: function(obj) { //即将重连的回调
  console.log(obj, '重连')
},
onDisconnect: function(obj) { //断开连接
  console.log(obj, 'SDK 连接断开')
},
disconnect: function() {   //手动断开连接
  if (this.chatroomInstance) {
    this.chatroomInstance.disconnect({
      done: () => {
        this.chatroomInstance = null
      },
    })
  } else {
    this.chatroomInstance = null
  }
},
onError: function(error) {  //连接失败
  console.log(error, 'SDK 连接失败')
},
getHistoryMsgsDone: function(error, obj) { //获取历史消息
  if (!error) {
    this.onMsg(obj.msgs.reverse())
  }
},
onMsg: function(msgs) {  //收到的消息
  msgs.map((msg) => {
    switch (msg.type) {
      case 'notification':
        // 获取系统消息--进行处理
        break;
      case 'text': //文本消息
        this.addTextToRender(msg)
        break;
    }
  })
},
addTextToRender: function(msg) { //添加文本消息到页面
  // 刷新界面
  let newMsg = {
    account: msg.from,
    nick: msg.fromNick,
    text: msg.text,
    type: msg.type,
    time: msg.time,
  }
  this.messageArr = [...this.messageArr, newMsg]
},
sendWords: function() { //发送文字
  this.chatroomInstance.sendText({
    text: this.userInfo.value,
    done: (error, msg) => {
      this.userInfo.value = ''
      this.addTextToRender(msg)
    },
  })
},

基本流程，剩下代码需要自行补充