vue对接网易云信1V1聊天

在网易云信注册登录创建应用后选择api调试

在这里我只用到了两个参数分别是accid和token 分别代表的是账号和token 为了方便对接 我这里加了两个账号分别的demo1 demo2 token可以自己定义

然后下载网易云信的SDK 

yunxin.163.com/im-sdk-demo 这个的SDK地址 在这里我们选择

下载后导入SDK

import NIM from "@/assets/js/NIM_Web_NIM_v7.8.1.js"

我在data里面定义了对方账号 我的账号及token 

初始化

this.nim = NIM.getInstance({          debug: true,          appKey: '云信key',          account: 'demo1', //帐号, 应用内唯一          token: '1415254329abcdefg',          onconnect: onConnect,          onwillreconnect: onWillReconnect,          ondisconnect: onDisconnect,          onerror: onError,          onsessions: onSessions,          onupdatesession: onUpdateSession,        });        function onConnect(res) {          console.log('连接成功');        };        function onWillReconnect(res) {          console.log('即将重连');        };        function onDisconnect(error) {          // 此时说明 SDK 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面          console.log('丢失连接');          console.log(error);          if (error.message == "不允许同一个帐号在多个地方同时登录") {            alert('您已经被挤下线')          }          if (error) {            switch (error.code) {              // 账号或者密码错误, 请跳转到登录页面并提示错误              case 302:                break;              // 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误              case 417:                break;              // 被踢, 请提示错误后跳转到登录页面              case 'kicked':                break;              default:                break;            }          }        };        function onError(error) {          console.log(error);        };        function onSessions(sessions) {          console.log('收到会话列表', sessions);          updateSessionsUI();        };        function onUpdateSession(session) {          console.log('会话更新了', session);        };        function updateSessionsUI() {          // 刷新界面        };

这个时候就已经初始化完成了 

接下来开始发送消息

由于没有点击事件和界面图 这边就写成两秒后自动发送内容为‘123465789’的内容

聊天已经成功了 只需要把内容放到视图上就行了 

附上一张成型图

新人前端 勿喷 欢迎指出问题 

后期会更新表情 图片 视频语音 录音发送等功能