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

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

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

    <divclass="aside-chart-info"ref="chatContent"><divclass="userItem"v-for="(item, index) in messageArr":key="index"><pv-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(){ //连接sdkthis.appLive = (调用后端接口获取聊天室用户信息)this.appLive.resRoomId= (根据情况调用接口获取聊天室id)let CurTime = Date.parse(new Date()) / 1000let Nonce = 413514513512569let 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, //在云信管理后台查看应用的 appKeyaccount: this.appLive.neteaseUserAccount, //帐号, 应用内唯一token: this.appLive.neteaseUserToken, //帐号的 token,chatroomId: this.appLive.chatRoomId, //聊天室idchatroomAddresses: resRoom.addr, //聊天室地址db: true, //若不要开启数据库请设置false。SDK默认为true。onconnect: this.onConnect, //成功的回调onwillreconnect: this.onWillreconnect, //即将重连的回调ondisconnect: this.onDisconnect, //断开连接onerror: this.onError, //erroronmsgs: 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)},})
},

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

vue使用云信实时通信(聊天室)相关推荐

技术干货 | 网易云信大规模聊天室系统架构解析
导读:聊天室是一类非常重要的 IM 系统,不同于单聊和群聊,聊天室是一种大规模的实时消息分发系统.本文我们来详细介绍一下网易云信大规模聊天室系统的具体架构以及实践应用案例. 文|曹佳俊网易云信资深服 ...
vue+websocket+nodejs实现聊天室 - 消息已读未读
前言上一篇讲了聊天室增加一对一单聊,这次讲如何新增已读未读状态. 大概思路: 服务器返回消息列表,增加参数status为1,单聊和群聊通过过滤状态区分对应未读数量,当前聊天,直接在currentMe ...
网易云信直播聊天室：无上限人数系统不卡顿，是不是鱼与熊掌不能兼得？
1.直播聊天室的形式和应用场景在一般人的理解中,直播聊天室应该就是直播画面旁边配一个聊天窗口,众多观看者在里面发表自己的评论(如图1).Oh, NO!这样的场景是不是太Low啦!随着互联网技术和消 ...
【系统开发】WebSocket + SpringBoot + Vue 搭建简易网页聊天室
文章目录一.数据库搭建二.后端搭建 2.1 引入关键依赖 2.2 WebSocket配置类 2.3 配置跨域 2.4 发送消息的控制类 2.5 R类三.前端搭建 3.1 自定义文件websock ...
云信小课堂｜搭建应用级别在线聊天室，7步就够了！
Vol. 6 从2000年至今,聊天室一直活跃在人们的各种生活场景中,目前广泛运用于超级小班课.互动大班课.连麦开黑.主播 PK 等场景,还具备文本.表情.点赞.撒花等互动方式,架起沟通桥梁的同时,玩 ...
Node + WebSocket + Vue 聊天室创建群聊/加入群聊功能 – 第五章
前言本次算是做了一个小小的专题吧,"Nodejs + WebSocket + Vue实现聊天室功能",目前还在一步一步推进,之前已经可以一对一.一对多聊天了,今天就来创建群聊组, ...
基于 vue.js 的仿QQ聊天室
简介这是一款基于 vue.js 开发的聊天室组件库,在提供基础封装的同时,最大程度的增加扩展性. 下面是效果演示图: MChat组件效果图: IChat组件效果图: 如何安装使用 npm 安装 n ...
关于网易云信聊天室 FAQ
聊天室和其他模块最大的区别在于聊天室类人数多,单位时间消息量巨大,在这种场景下如果开发者还是按照处理群的逻辑来处理聊天室就会引起很多的问题,下面主要列举一下常见的问题. Q:登录云信聊天室是否要求先登 ...
从0搭建在线聊天室，只需4步！
Vol. 5 聊天室不同于单聊和群聊,是一类集成了多种 IM 功能一体的大规模实时消息分发系统.在跨入新世纪的2000年,聊天室作为新型的即时通讯场景迅速在年轻人群体中火热起来,"网易聊天室 ...

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

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

初始化数据

js

vue使用云信实时通信(聊天室)相关推荐

最新文章

热门文章