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，建议实现两人聊天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。