vue2集成声网-环信即时通讯SDK，建议实现两人聊天

1.注册登陆环信并创建用户

步骤：注册 => 登录 => 创建应用 => 创建应用用户

登录注册：环信登陆注册页面（https://console.easemob.com/user/login）

创建应用 （ps：应该有一个试用的，就是应用列表第一个，有的话可不用再创建）

【创建应用】页面：

appname：应用的ID，唯一

Appkey：环信自动生成的一串唯一标识，用来区别应用

产品名称：根据自己的需求填写

描述：根据自己的需求填写

注册模式：一般选择开放注册

创建应用用户 （至少创建两个，方便后面的一对一聊天通讯）

2.项目中npm下载环信sdk

环信开发文档：开发文档链接（https://docs-im.easemob.com/im/web/intro/integration）

npm install easemob-websdk --save

3.在环信开发文档上拉取对应的vue2的demo

地址：https://docs-im-beta.easemob.com/document/web/demo_vue.html

拉取下来项目之后找到路径为src/utils

目前只用到这四个js文件。

EMedia_x1v1_3.4.1.js: 对webrtc的集成(个人理解)

index.js: 对时间格式化的方法和文件大小单位的计算方法

WebIM.js: 初始化IM SDK内容，以及接收消息之后的一些会调事件

WebIMConfig.js: websdk的配置项 需要修改appkey为自己在环信上新建项目的appkey。

（这四个文件可以放到项目的src/utils/WebIM里面，新建该文件夹）

此时我们的环境基本已经完成，现在需要搭建两个页面（可以下载一下elementUI库）

https://element.eleme.io/#/zh-CN/component/installation

A页面

5.实现登陆，发送消息，接收消息（这里直接登陆了就没写登陆页面）

<template><div> <div id='msgBody' style="width: 80%;height: 500px;background-color: #fdffea;overflow: auto;"><div v-for='(item, index) in messageList' :key="index"><div v-if="item.from=='miss01'?true:false" ><div style="text-align: center;">{{item.time}}</div><div style="float: right;"><p style="color: #00aaff;">{{item.from}}</p><span >{{item.info}}</span></div><br style="clear: both;"/> </div><div v-else><div style="text-align: center;">{{item.time}}</div><div><p style="color: #00aaff;">{{item.from}}</p><span>{{item.info}}</span></div> </div></div></div><div id='msgFooter'><el-input type="textarea" :rows="3" v-model="inputMessage" @keyup.enter.native="sendMessage()" style="outline: none;"></el-input><div><el-button class="sendBnt" type="primary" @click="sendMessage()" round>发送(S)</el-button></div></div></div> </template> <script> import websdk from 'easemob-websdk' import WebIM from '../utils/WebIM.js' //格式化时间 import {renderTime} from '../utils/index.js'; export default{name:'IMChatA',components:{},data(){ return{ user: '******', //自己应用下的用户idpwd: '*******', //用户密码inputMessage:'',messageList:[], //消息}},created(){this.loginIM();}, methods:{//登陆loginIM(){var options = {user: this.user,pwd: this.pwd,appKey: WebIM.config.appkey,success: function (res) {console.log(res)console.log('成功')},error: function (err){console.log(err)}};WebIM.conn.open(options); this.getMessage(); },//发送消息sendMessage(){ if (!this.inputMessage || !(this.inputMessage.replace(/&nbsp;|\s/g, ''))) {this.$message.info('发送内容不能为空!'); return;}let that=this;let contentMsg=that.inputMessage; let toID ='*****'; //收信息用户idlet id = WebIM.conn.getUniqueId(); // 生成本地消息idlet msg = new WebIM.message('txt', id); // 创建文本消息msg.set({msg: contentMsg, // 消息内容to: toID, // 接收消息对象（用户id）chatType: 'singleChat', // 设置为单聊 success: function (id, serverMsgId) { console.log('成功发送消息'); that.sendMessageSuccessful(contentMsg,toID,'txt'); }, fail: function(e){ console.log("发送消息失败"); }}); WebIM.conn.send(msg.body);that.inputMessage=null;},//成功发送消息，进行消息加入到聊天信息数组中sendMessageSuccessful(data,toID,type){console.log("存储信息中》》》》》");let userMsg={};userMsg.to=toID; userMsg.from=this.user;userMsg.info=data;// userMsgtime=renderTime(new Date(new Date().getTime()),'yyyy-MM-dd hh:mm');userMsg.time=renderTime(new Date().getTime());userMsg.msgType=type;//存储信息this.messageList.push(userMsg); },// 集成收到文本信息方法getMessage(){let that=this;WebIM.conn.listen({onOpened: function (message) {console.log('用户已上线') // 连接成功},onTextMessage: function ( message ) {console.log('收到文本信息')console.log(message)let date = renderTime(new Date(new Date().getTime()),'yyyy-MM-dd hh:mm');let value = {}// 普通文本信息value = {msgType: 'text', info: message.data,to: message.to,from: message.from,time: date}that.messageList.push(value) // 添加到聊天信息数组中 }}); }, } } </script>

B页面

6.登陆发送消息接收消息代码与A页面相同，只是登陆的用户的Id和密码，以及收信息用户id需要修改，还有就是调整HTML聊天信息显示位置）

需修改的地方

7.开两个浏览器页面实现一对一单聊

下期写vue+声网-环信即时通讯sdk+electron集成桌面应用，第一次写文章，写的不对敬请谅解

总结

以上是生活随笔为你收集整理的vue2集成声网-环信即时通讯SDK，建议实现两人聊天的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。