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

最新推荐文章于 2024-03-14 16:15:41 发布
最新推荐文章于 2024-03-14 16:15:41 发布
阅读量691 收藏 3
点赞数
文章标签： javascript 前端 vue.js
原文链接：https://blog.csdn.net/qq_37021136/article/details/120920849
版权

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({
      // 初始化SDK
      debug: 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>
潇潇洒洒吃西瓜
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue即时通讯IM聊天源码-其他
06-11
基于WebSocket实现的vue websocket聊天，支持一对一聊天，功能包含登录页面、对话界面、好友列表、上下线提醒等。 websocket服务采用的国内知名的第三方websocket框架【GoEasy】实现。 源代码精炼，层次清晰，非常适合有学习、开发websocket聊天软件的开发者。 运行步骤: 1、获取GoEasy Appkey 先到GoEasy官网注册一个账号，登录后，创建一个应用，就能得到您的appkey。 2、配置您的appkey 在main.js，将appkey替换为您自己的common key 3、项目构建 npm install 4、运行 npm run serve
网易云信demo
01-17
网易云信官方demo 网易短信接口 网易聊天室等接口
vue使用云信实时通信(聊天室)
Black_Eva的博客
03-03 996
首先下载云信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 messa
在vue-cli项目中，如何使用网易云信
qq_43561840的博客
03-27 3404
在vue-cli项目中，如何使用网易云信做聊天功能 你需要网易云信的key, account，token。请前往网易云信官网注册获取。不做过多解释 下载SDK 将NIM_Web_NIM_v7.4.0.js放入你项目的指定位置。在组建中需要引入 组件使用： <vlChar :appKey="appKey" :account="account" :token="token"></vl...
vue 基于网易云API的短信验证码登录（axios封装）
邓邓今天加油了吗
06-09 1707
vue2 网易云API 短信验证登录
网易即时通讯心得体会（2）
MrXu的博客
07-07 1105
这里接着上一篇说，这篇也主要介绍我攻读API和SDK的心得体会，但是还要加上使用的时候我的一些思考，因为这些思考会影响后期的产品 1.读API的技巧 API链接戳这里 我首先看的是API，想知道他能实现哪些功能。API的分类很清晰，一共五个类，其中的NIM是核心，其他的四个可以说是扩展。我用的到的俩个是NetCall和WebRTC，如果你需要ChatRoom和whiteBoard虽然我没看，...
基于vue2.0x 的即时通讯（云信版本）
我乃小神神的博客
12-17 5811
即时通讯听着很难，但是了，其实也的确不简单，websocket 可以多了解一下 网易云信 vue版本 https://github.com/netease-im/NIM_Web_Demo_H5 可以先看看网易写的代码，的确写的很好，接下来步入正题，如果想直接用，引入例子，向下看准没有错 先下载demo，中间有部分代码我都省略，到时候可以去我的github上看，直接引入自己项目， 其实最容易...
基于Vue和Javascript的IM即时聊天Web应用设计源码
04-15
基于Vue和Javascript的IM即时聊天Web应用设计源码，该项目包含116个文件，主要文件类型有40个vue前端文件，以及30个javascript文件。此外，还包括22个png图像文件，以及4个jpg图像文件。该项目是一个基于Vue和...
vue2+腾讯云IM的聊天系统
07-25
vue2腾讯云IM聊天系统
基于Vue3的个人博客聊天室IM设计源码
最新发布
04-16
本源码项目是基于Vue3的个人博客聊天室IM设计，包含63个文件，主要使用JavaScript、Vue、CSS和HTML编程语言。该项目旨在创建一个具有聊天室功能的个人博客，使用SpringBoot和Vue技术栈。系统提供了博客文章的发布、...
集成云信SDK-web版-vue客服（伸手党）
c_liufeng的博客
11-15 2250
<template> <div class="customer-servce"> <div class="imServer-wrapper"> <main class="imServer-main"> <im-record class="item im-record" ...
网易云信IM讲解
我乃小神神的博客
04-08 4283
本按钮只针对H5版本讲解,前端部分 网易云信H5地址下载 1 demo下载 首先下载当前当前demo，并本地运行，由于网易云信提供的是采用的是node中间件的模式，所以你如果直接运行 npm run dev 是运行的打包命令，你需要运行 npm run server，来运行他当前的demo 首先去网易云信控制端注册 注册完成之后，进入控制台，获取APPkey，因为这个是需要进行唯一通信的...
vue2 对接网易im初始化操作
weixin_67141691的博客
05-16 702
（this.xxxxx为各自的回调函数写在methods里，这里就不一一诉说了，有需要可以上官网文档自行查看，实在看不懂的可以给我留言）（当然你也可以在项目main.js中进行全局初始化操作，这里我就不细讲了，你细品）二、选择一个sdk引入到项目中（按自己的需求来，我这里选择的是功能最全的）一，上网易im官网下载对应的sdk（我这里选择的是web端的）下载好了如下文件，具体区别上官网自行查看。注意路径路径要选中你的存放的sdk文件。三、 在需要的页面进行初始化操作。
uni-app app开发对接网易云信IM
Helsonlin
10-31 4909
项目聊天页面为vue开发，所以直接选用Web sdk，选用的sdk版本为：NIM_Web_SDK_weixin_v7.2.0.js 。 网易云信提供的web sdk 为js文件，使用时直接放在某个目录文件夹下即可. sdk 文件位置 初始化登录IM 这里我们项目需求是需要在用户打开App时，就默认登录到网易云信IM。所以我直接将登录注册IM方法放在Vuex actions 内，当App打开获取到用户的本地个人信息之后，直接登录到IM。 ```javascript ```javascr.
uniapp微信小程序集成网易云信IM（自己记录着看）
m0_38083000的博客
03-14 1331
运算符byte i = 5；i +=1； //相当于已经强转为byte i = （byte）（i+1）^ : 两边相同为false 不同为ture
基于vue2.x 聊天(IM)UI组件,开箱即用
或许丶Blog
07-31 3441
m-chat 介绍 基于vue2.x 聊天(IM)UI组件(3.x以后支持) 演示 Demo 安装 npm install @maybecode/m-chat 全局安装 import Vue from 'vue' import MChat from '@maybecode/m-chat' Vue.use(MChat) 局部安装 import MChat from '@maybecode/m-chat' export default { components: { MChat } }
网易云信Web IM入门（一）
热门推荐
malimingwq的博客
02-28 1万+
一.运行Web IM的demo1.1 Web IM的demo下载链接：https://github.com/netease-im/NIM_Web_Demo1.2 运行Web IM的demo，首先你需要安装Node.js（这里不讲，自行百度），然后打开你从GitHub上克隆的项目，同时按shift+Ctrl键，鼠标右击打开命令提示符（或Powershell）,先输入npm install接着输入 n...
对接网易云信IM服务
weixin_33851604的博客
10-27 1120
这是之前在简书上写的文章，用了一段时间觉得简书功能太杂自己想专注技术方面，所以将之前的文章转移到掘金上。这是一个远程医疗问诊的项目也就是大家俗称的网络医院，其中有些功能是医生通过远程视频帮助患者梳理病情并提供治疗建议或方案。即需要实时音视频和聊天的功能，因为工期和技术的限制，自己写这些功能肯定不现实所以引入第三方，最后决定使用网易云。写本文的目的在于以前一直接触融云、环信等第三方，使...
vue网易云信 单聊
09-19
vue网易云信可以实现单聊功能。通过引入库，我们可以使用网易云信提供的API来实现单聊功能。具体步骤如下： 1. 引入网易云信的库，可以通过以下方式引入： ```javascript import NIM from '网易云信库的路径'; ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值