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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/web_whx/article/details/99562155

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不同.

在这里插入图片描述
因为代码水平有限…能有帮助最好,哈哈哈.

展开阅读全文

没有更多推荐了,返回首页