关于vue集成环信即时通讯的Web IM

Vue集成环信@[TOC]

原因:

因为原有项目需要一个商家与客户之间的聊天通讯,需要商家后台和客户进行聊天,这边IOS老大选择使用环信的集成.
注:这里感谢一位大佬提供的一些帮助
https://blog.csdn.net/github_35631540/article/details/80278114
这是大佬的文章,

问题:

看了一下环信的文档,下载的demo是用React写的,然后找了面向百度找到了一些资料,这里也想自己试着写一下总结,因为是新手,又是测试版所有非常乱,如果可以带给大家帮助更好.

开始

1.首先集成环信
npm i easemob-websdk@1.8.3
npm i strophe.js@1.2.16
注:这里不同版本好像不一样,我看了资料都是下这两个版本的,所以保险起见

2.找到三个文件
/node_modules/strophe.js/strophe.js
/node_modules/easemob-websdk/src/connection.js
/webim.config.js

3.在strophe.js中大概2900行左右加入一段代码

4.在connection.js中加入

这段代码需要加在var Strophe = window.Strophe这行代码下面,就在十几行

5.然后配置webim.config.js文件
将var WebIM = {}; 替换成var WebIM = window.WebIM || {};
将appkey修改成自己的就行了

6.接下来就是在main.js中引入啦
.先引入webim.config.js文件
再require你的环信对象
然后将他赋给你的vue原型上

7.最后就可以在你的代码中使用啦
这是我一开始做的实验版

完成的就只有与好友的聊天和删除记录
8.代码如下

添加

9.这里是自动登录的,注册请到环信去注册IM用户,然后我这里用户名和密码都是先写死的,
登录

获取好友列表
本来获取好友列表我准备在created里获取,但行不通,需要在监听用户上线后获取

发送消息

接上

接受好友消息

不同的好友的消息我是利用localstrong,利用没有好友的id不同.

因为代码水平有限…能有帮助最好,哈哈哈.