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

本文链接：https://blog.csdn.net/qq_46367756/article/details/129261379

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: '******',  //自己应用下的用户id
            pwd: '*******',    //用户密码
            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 ='*****';   //收信息用户id
            let id = WebIM.conn.getUniqueId();                 // 生成本地消息id
            let 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页面