1.注冊(cè)登陸環(huán)信并創(chuàng)建用戶

步驟：注冊(cè) => 登錄 => 創(chuàng)建應(yīng)用 => 創(chuàng)建應(yīng)用用戶

登錄注冊(cè)：環(huán)信登陸注冊(cè)頁(yè)面（https://console.easemob.com/user/login）

創(chuàng)建應(yīng)用 （ps：應(yīng)該有一個(gè)試用的，就是應(yīng)用列表第一個(gè)，有的話可不用再創(chuàng)建）

【創(chuàng)建應(yīng)用】頁(yè)面：

appname：應(yīng)用的ID，唯一

Appkey：環(huán)信自動(dòng)生成的一串唯一標(biāo)識(shí)，用來(lái)區(qū)別應(yīng)用

產(chǎn)品名稱：根據(jù)自己的需求填寫(xiě)

描述：根據(jù)自己的需求填寫(xiě)

注冊(cè)模式：一般選擇開(kāi)放注冊(cè)

創(chuàng)建應(yīng)用用戶 （至少創(chuàng)建兩個(gè)，方便后面的一對(duì)一聊天通訊）

2.項(xiàng)目中npm下載環(huán)信sdk

環(huán)信開(kāi)發(fā)文檔：開(kāi)發(fā)文檔鏈接（https://docs-im.easemob.com/im/web/intro/integration）

npm install easemob-websdk --save

3.在環(huán)信開(kāi)發(fā)文檔上拉取對(duì)應(yīng)的vue2的demo

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

拉取下來(lái)項(xiàng)目之后找到路徑為src/utils

目前只用到這四個(gè)js文件。

EMedia_x1v1_3.4.1.js: 對(duì)webrtc的集成(個(gè)人理解)

index.js: 對(duì)時(shí)間格式化的方法和文件大小單位的計(jì)算方法

WebIM.js: 初始化IM SDK內(nèi)容，以及接收消息之后的一些會(huì)調(diào)事件

WebIMConfig.js: websdk的配置項(xiàng) 需要修改appkey為自己在環(huán)信上新建項(xiàng)目的appkey。

（這四個(gè)文件可以放到項(xiàng)目的src/utils/WebIM里面，新建該文件夾）

此時(shí)我們的環(huán)境基本已經(jīng)完成，現(xiàn)在需要搭建兩個(gè)頁(yè)面（可以下載一下elementUI庫(kù)）

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

A頁(yè)面

5.實(shí)現(xiàn)登陸，發(fā)送消息，接收消息（這里直接登陸了就沒(méi)寫(xiě)登陸頁(yè)面）

<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>發(fā)送(S)</el-button></div></div></div> </template> <script> import websdk from 'easemob-websdk' import WebIM from '../utils/WebIM.js' //格式化時(shí)間 import {renderTime} from '../utils/index.js'; export default{name:'IMChatA',components:{},data(){ return{ user: '******', //自己應(yīng)用下的用戶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(); },//發(fā)送消息sendMessage(){ if (!this.inputMessage || !(this.inputMessage.replace(/&nbsp;|\s/g, ''))) {this.$message.info('發(fā)送內(nèi)容不能為空!'); return;}let that=this;let contentMsg=that.inputMessage; let toID ='*****'; //收信息用戶idlet id = WebIM.conn.getUniqueId(); // 生成本地消息idlet msg = new WebIM.message('txt', id); // 創(chuàng)建文本消息msg.set({msg: contentMsg, // 消息內(nèi)容to: toID, // 接收消息對(duì)象（用戶id）chatType: 'singleChat', // 設(shè)置為單聊 success: function (id, serverMsgId) { console.log('成功發(fā)送消息'); that.sendMessageSuccessful(contentMsg,toID,'txt'); }, fail: function(e){ console.log("發(fā)送消息失敗"); }}); WebIM.conn.send(msg.body);that.inputMessage=null;},//成功發(fā)送消息，進(jìn)行消息加入到聊天信息數(shù)組中sendMessageSuccessful(data,toID,type){console.log("存儲(chǔ)信息中》》》》》");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;//存儲(chǔ)信息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) // 添加到聊天信息數(shù)組中 }}); }, } } </script>

B頁(yè)面

6.登陸發(fā)送消息接收消息代碼與A頁(yè)面相同，只是登陸的用戶的Id和密碼，以及收信息用戶id需要修改，還有就是調(diào)整HTML聊天信息顯示位置）

需修改的地方

7.開(kāi)兩個(gè)瀏覽器頁(yè)面實(shí)現(xiàn)一對(duì)一單聊

下期寫(xiě)vue+聲網(wǎng)-環(huán)信即時(shí)通訊sdk+electron集成桌面應(yīng)用，第一次寫(xiě)文章，寫(xiě)的不對(duì)敬請(qǐng)諒解

總結(jié)

以上是生活随笔為你收集整理的vue2集成声网-环信即时通讯SDK，建议实现两人聊天的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。