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

即时通讯 专栏收录该内容
1 篇文章 0 订阅

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

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

    • 2
      点赞
    • 3
      评论
    • 2
      收藏
    • 一键三连
      一键三连
    • 扫一扫,分享海报

    ©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

    余额充值