vue如何对接网易云信IM即时聊天？

示例：官方Demo跑不通且API看起来太复杂,这里直接提取直接能跑通的代码,拿去即可使用

使用步骤

1.引入库

首先引入网易云信的Web API：

2.全局引入

代码如下（示例）：

其它的代码不用看,只看引入的部分就可以了

直接能拿来跑通的页面代码:

<template><div class="hello">2111111111111111111111111<button @click="sendMsga">发送给test账号数据</button><div v-for="(item,index) in dataInfo " ::key="index" >{{item}}</div><!-- {{ dataInfo }} --></div>
</template><script>
var data={}
export default {name: "HelloWorld2",props: {},data() {return {nim: "",msgdata:'',dataInfo:{msgs:[]}};},methods: {sendMsga() {// let obj={//   gender:'',//   content:''// }// 写个对象,把自己的性别带上去var msg = this.nim.sendCustomMsg({scene: 'p2p',to: 'check1',content: '自定义内容随便来电',done: this.sendMsgDone});this.pushMsg(msg);this.dataInfo.msgs.push(msg)console.log(this.dataInfo,'找里面的msg进行渲染')},getHistoryMsgsDone(error,obj){console.log('获取报错和对应信息:',error,obj,'对应参数信息=====================================================================================================================>')},onMsg(msg) {console.log("收到消息", msg.scene, msg.type, msg,'收到消息了啊');this.pushMsg(msg);this.dataInfo.msgs.push(msg)},connect() {console.log("连接成功!");},sendMsgDone(error, msg) {console.log(error, msg, "发送成功后");},onConnect() {console.log("连接成功");},onWillReconnect(obj) {// 此时说明 `SDK` 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接console.log("即将重连", obj);},onDisconnect(error) {// 此时说明 `SDK` 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面console.log("连接断开", error);if (error) {switch (error.code) {// 账号或者密码错误, 请跳转到登录页面并提示错误case 302:break;// 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误case 417:break;// 被踢, 请提示错误后跳转到登录页面case "kicked":break;default:break;}}},onError(error, obj) {console.log("发生错误", error, obj);},onLoginPortsChange(loginPorts) {console.log("当前登录帐号在其它端的状态发生改变了", loginPorts);},onBlacklist(blacklist) {console.log("收到黑名单", blacklist);data.blacklist = this.nim.mergeRelations(data.blacklist, blacklist);data.blacklist = this.nim.cutRelations(data.blacklist, blacklist.invalid);refreshBlacklistUI();},onMarkInBlacklist(obj) {console.log(obj.account + "被你" + (obj.isAdd ? "加入" : "移除") + "黑名单",obj);if (obj.isAdd) {addToBlacklist(obj);} else {removeFromBlacklist(obj);}},addToBlacklist(obj) {data.blacklist = this.nim.mergeRelations(data.blacklist, obj.record);refreshBlacklistUI();},removeFromBlacklist(obj) {data.blacklist = this.nim.cutRelations(data.blacklist, obj.record);refreshBlacklistUI();},refreshBlacklistUI() {// 刷新界面},onMutelist(mutelist) {console.log("收到静音列表", mutelist);data.mutelist = this.nim.mergeRelations(data.mutelist, mutelist);data.mutelist = this.nim.cutRelations(data.mutelist, mutelist.invalid);refreshMutelistUI();},onMarkInMutelist(obj) {console.log(obj.account + "被你" + (obj.isAdd ? "加入" : "移除") + "静音列表",obj);if (obj.isAdd) {addToMutelist(obj);} else {removeFromMutelist(obj);}},addToMutelist(obj) {data.mutelist = this.nim.mergeRelations(data.mutelist, obj.record);},removeFromMutelist(obj) {data.mutelist = this.nim.cutRelations(data.mutelist, obj.record);},refreshMutelistUI() {// 刷新界面},onFriends(friends) {console.log("收到好友列表", friends);data.friends = this.nim.mergeFriends(data.friends, friends);data.friends = this.nim.cutFriends(data.friends, friends.invalid);},onSyncFriendAction(obj) {console.log("收到好友操作", obj);switch (obj.type) {case "addFriend":console.log("你在其它端直接加了一个好友" + obj);onAddFriend(obj.friend);break;case "applyFriend":console.log("你在其它端申请加了一个好友" + obj);break;case "passFriendApply":console.log("你在其它端通过了一个好友申请" + obj);onAddFriend(obj.friend);break;case "rejectFriendApply":console.log("你在其它端拒绝了一个好友申请" + obj);break;case "deleteFriend":console.log("你在其它端删了一个好友" + obj);onDeleteFriend(obj.account);break;case "updateFriend":console.log("你在其它端更新了一个好友", obj);onUpdateFriend(obj.friend);break;}},onAddFriend(friend) {data.friends = this.nim.mergeFriends(data.friends, friend);},onDeleteFriend(account) {data.friends = this.nim.cutFriendsByAccounts(data.friends, account);},onUpdateFriend(friend) {data.friends = this.nim.mergeFriends(data.friends, friend);},refreshFriendsUI() {// 刷新界面},onMyInfo(user) {console.log("收到我的名片", user);data.myInfo = user;},onUpdateMyInfo(user) {console.log("我的名片更新了", user);data.myInfo = this.nim.util.merge(data.myInfo, user);},updateMyInfoUI() {// 刷新界面},onUsers(users) {console.log("收到用户名片列表", users);data.users = this.nim.mergeUsers(data.users, users);},onUpdateUser(user) {console.log("用户名片更新了", user);data.users = this.nim.mergeUsers(data.users, user);},onSuperTeams(superTeams) {console.log("收到超大群列表", superTeams);data.superTeams = this.nim.mergeTeams(data.superTeams, superTeams);},onInvalidSuperTeams(teams) {data.superTeams = this.nim.cutTeams(data.superTeams, teams);data.invalidSuperTeams = this.nim.mergeTeams(data.invalidSuperTeams, teams);refreshSuperTeamsUI();},onSyncCreateSuperTeam(team, owner) {console.log("创建了一个超大群 onSyncCreateSuperTeam ", team, owner);data.superTeams = this.nim.mergeTeams(data.superTeams, team);refreshSuperTeamsUI();onSuperTeamMembers({teamId: team.teamId,members: owner,});},onAddSuperTeamMembers(team, accounts, members) {console.log("添加群成员 onAddSuperTeamMembers ", team, accounts, members);if (!accounts && !members) {accounts = team.accounts || [];members = team.members || [];team = team.team || {};}var teamId = team.teamId;// 如果是别人被拉进来了，那么拼接群成员列表// 如果是自己被拉进来了，那么同步一次群成员列表if (accounts.indexOf(data.account) === -1) {onSuperTeamMembers({teamId: teamId,members: members,});} else {// ...}onSuperTeams(team);},onDismissSuperTeam(obj) {console.log("解散超大群 onDismissSuperTeam", obj);var teamId = obj.teamId;removeAllSuperTeamMembers(teamId);data.superTeams = this.nim.cutTeams(data.superTeams, obj);refreshSuperTeamsUI();refreshSuperTeamMembersUI();},onRemoveSuperTeamMembers(obj) {console.log("移除了群成员 onRemoveSuperTeamMembers ", obj.accounts, obj);var teamId = obj.team.teamId;var accounts = obj.accounts;var team;if (!teamId && !accounts) {accounts = obj.accounts || [];}// 如果是别人被踢了，那么移除群成员// 如果是自己被踢了，那么离开该群if (accounts.indexOf(data.account) === -1) {if (team) {onSuperTeams(team);}if (!data.superTeamMembers) {data.superTeamMembers = {};}data.superTeamMembers[teamId] = this.nim.cutTeamMembersByAccounts(data.superTeamMembers[teamId],teamId,accounts);refreshSuperTeamMembersUI();} else {leaveSuperTeam(teamId);}},onUpdateSuperTeam(err, msg) {console.log("更新了超大群 teamId", err, msg);},onUpdateSuperTeamMember(member) {console.log("群成员信息更新了", member);},leaveSuperTeam(teamId) {removeAllSuperTeamMembers(teamId);},refreshSuperTeamsUI() {},refreshSuperTeamMembersUI() {},removeAllSuperTeamMembers() {},onTeams(teams) {console.log("群列表", teams);data.teams = this.nim.mergeTeams(data.teams, teams);},onInvalidTeams(teams) {data.teams = this.nim.cutTeams(data.teams, teams);data.invalidTeams = this.nim.mergeTeams(data.invalidTeams, teams);refreshTeamsUI();},onCreateTeam(team) {console.log("你创建了一个群", team);data.teams = this.nim.mergeTeams(data.teams, team);refreshTeamsUI();onTeamMembers({teamId: team.teamId,members: owner,});},refreshTeamsUI() {// 刷新界面},onTeamMembers(obj) {console.log("收到群成员", obj);var teamId = obj.teamId;var members = obj.members;data.teamMembers = data.teamMembers || {};data.teamMembers[teamId] = this.nim.mergeTeamMembers(data.teamMembers[teamId],members);data.teamMembers[teamId] = this.nim.cutTeamMembers(data.teamMembers[teamId],members.invalid);refreshTeamMembersUI();},onSyncTeamMembersDone() {console.log("同步群列表完成");},onUpdateTeamMember(teamMember) {console.log("群成员信息更新了", teamMember);onTeamMembers({teamId: teamMember.teamId,members: teamMember,});},refreshTeamMembersUI() {// 刷新界面},onSessions(sessions) {console.log("收到会话列表", sessions);data.sessions = this.nim.mergeSessions(data.sessions, sessions);this.updateSessionsUI();},onUpdateSession(session) {console.log("会话更新了", session);data.sessions = this.nim.mergeSessions(data.sessions, session);this.updateSessionsUI();},updateSessionsUI() {// 刷新界面},onRoamingMsgs(obj) {console.warn("漫游消息============================>", obj);this.pushMsg(obj.msgs);this.dataInfo.msgs.push(obj.msgs)},onOfflineMsgs(obj) {console.log("离线消息", obj);this.pushMsg(obj.msgs);this.dataInfo.msgs.push(obj.msgs)},onMsg(msg) {console.log("收到消息", msg.scene, msg.type, msg);this.pushMsg(msg);this.dataInfo.msgs.push(obj.msgs)},pushMsg(msgs) {if (!Array.isArray(msgs)) {msgs = [msgs];}var sessionId = msgs[0].sessionId;this.dataInfo.msgs = this.dataInfo.msgs || {};this.dataInfo.msgs[sessionId] = this.nim.mergeMsgs(this.dataInfo.msgs[sessionId], msgs);console.warn('执行完之后',this.dataInfo)},onOfflineSysMsgs(sysMsgs) {console.log("收到离线系统通知", sysMsgs);pushSysMsgs(sysMsgs);},onSysMsg(sysMsg) {console.log("收到系统通知", sysMsg);pushSysMsgs(sysMsg);},onUpdateSysMsg(sysMsg) {pushSysMsgs(sysMsg);},pushSysMsgs(sysMsgs) {data.sysMsgs = this.nim.mergeSysMsgs(data.sysMsgs, sysMsgs);},onSysMsgUnread(obj) {console.log("收到系统通知未读数", obj);data.sysMsgUnread = obj;},onUpdateSysMsgUnread(obj) {console.log("系统通知未读数更新了", obj);data.sysMsgUnread = obj;},refreshSysMsgsUI() {// 刷新界面},onOfflineCustomSysMsgs(sysMsgs) {console.log("收到离线自定义系统通知", sysMsgs);},onCustomSysMsg(sysMsg) {console.log("收到自定义系统通知", sysMsg);},onSyncDone() {console.log("同步完成");},getHistoryMsgsDone(error, obj) {console.warn('获取云端历史记录' + (!error?'成功':'失败'), error, obj);if (!error) {console.log(obj.msgs);setTimeout(() => {this.dataInfo=obj}, 200);}}},mounted() {console.log(this.nim);this.nim = this.NIM.getInstance({// 初始化SDKdebug: true,appKey: "你从控制台处获得的appKey",account: "你的账号",token: "控制台处账号生成的唯一token",onconnect: this.onConnect,onerror: this.onError,onwillreconnect: this.onWillReconnect,ondisconnect: this.onDisconnect,// 会话onsessions: this.onSessions,onupdatesession: this.onUpdateSession,// 消息onroamingmsgs: this.onRoamingMsgs,onofflinemsgs: this.onOfflineMsgs,onmsg: this.onMsg,// 同步完成onsyncdone: this.onSyncDone,});setTimeout(() => {this.nim.getHistoryMsgs({scene: 'p2p',to: 'check',done: this.getHistoryMsgsDone});}, 300);},watch:{'dataInfo':{handler(newvalue, oldvalue) {console.warn(newvalue,oldvalue,'!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')},deep: true}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

拿去用吧

vue如何对接网易云信IM即时聊天相关推荐

网易im即时聊天php怎么接入,网易云信IM即时通讯功能接入方式与流程_如何收费_企业服务汇...
编者按:很多企业在考虑使用网易云信提供的IM即时通讯功能,对于企业应当如何接入该功能.接入方式和流程是怎样的.应当如何收费等不太清楚.企业服务汇通过评测网易云信IM即时通讯功能来告诉你答案. 网易云信 ...
网易云信-IM即时通讯微信小程序端实现
小程序端的需求,使用网易云信的即时通讯作为咨询沟通的工具. 剥离点对点聊天功能且能独立运行的git项目: https://github.com/GstKishn/IM/ 如解决了你的燃眉之急(开发不易 ...
网易云信IM即时通讯聊天源码SDK 并发高轻松万人并发稳定不丢消息后端PHP 前端安卓Java
优势:承载用户并发同时在线都在第三方网易云信高并发轻松承载万人并发. 开发语言:后端PHP 前端安卓Java 苹果 OC PC端C# 网易云信 IM UIKit是基于 NIM SDK(网易云信 IM ...
网易云信IM即时通讯PHP接口开发
网易云信:https://www.163yun.com 注册地址:https://app.netease.im/regist 登录地址:https://app.netease.im/login 架构设 ...
android 极光环信,环信、容联云通讯、极光推送和网易云信IM即时通讯功能接入方式_部署方式_企业服务汇...
编者按:企业在挑选IM即时通讯功能服务商时,对于企业应当如何接入其IM功能.接入方式和部署方式有哪些等问题不太清楚.今天企业服务汇通过评测环信.容联云通讯.极光推送和网易云信这四家服务商来为你详细说明 ...
php网易云信如何使用,如何使用网易云信实现匿名聊天
手机端的 APP 如果嵌入了 IM 模块,比如网易云信(环信),这些第三方的服务都有自己的账户系统,也是需要注册登录. 现在有这么一个需求:如何实现匿名聊天?同时要实现实名聊天. 需求可以简单理解为: ...
对接网易云信IM服务
这是之前在简书上写的文章,用了一段时间觉得简书功能太杂自己想专注技术方面,所以将之前的文章转移到掘金上.这是一个远程医疗问诊的项目也就是大家俗称的网络医院,其中有些功能是医生通过远程视频帮助患者梳理病 ...
iOS使用网易云信在线视频聊天
视频demo分享链接: 1.demo中更新NIMSDK版本为2.9.0,视频页面UI部分用了网易云信官方demo的视频UI部分 https://github.com/colourfulStar/NIM ...
网易云信im即时通讯,php网易云信im即时通讯,tp,demo,即时通讯
请先配置appKey和appSecret 本demo实现了服务端和web的联调(系统通知) 服务端参考文档:开发者中心 WEB参考文档:开发者中心目录 1.公共类 Common.php 2. ...

vue如何对接网易云信IM即时聊天

vue如何对接网易云信IM即时聊天？

使用步骤

1.引入库

2.全局引入

直接能拿来跑通的页面代码:

vue如何对接网易云信IM即时聊天相关推荐

最新文章

热门文章