Vue 简单集成环信SDK

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

在这里简单记录下 vue 集成环信 Web SDK 操作,简单SDK操作记录,没有完整demo,勿喷!

准备工作

一、 下载环信 Web SDK + Demo 到本地

	git clone https://github.com/easemob/webim 

二、 找到sdk,storphe,WebIMConfig,音视频sdk EMedia,websdk-shim(表情目录) 等文件
老版本还是需要storphe文件,音视频sdk 不支持直接 npm install

  1. sdk ,storphe,websdk-shim 等文件是在webim/sdk/dist/目录下
  2. EMedia 文件是在 webim/webrtc/dist/目录下
  3. WebIMConfig 文件是在 webim/demo/src/config/目录下

集成操作

一、搭建 vue-cli
(参考出处:https://blog.csdn.net/qq_33036599/article/details/79656597)

  1. 使用以下命令全局安装vue-cli
	npm install -g vue-cli 
  1. 使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称。
    并配置需要安装的vue环境
    在这里插入图片描述
  2. 进入文件,运行
	cd vue-demo
	npm run dev

在命令行返回可以访问的地址即可。

二、集成Web SDK
       集成sdk 分两种方式,
        1)引用本地文件,将集成需要的文件下载到本地,然后引入到项目中
        2) npm 方式,然后通过 import" 导入

      本地引入方式:

  1. index.html 中引入需要的文件 在这里插入图片描述
  2. 创建一个initWeb.js 初始化sdk,注册监听回调,初始化音视频,然后 export 抛出 在这里插入图片描述
  3. 填写页面调用按钮,调用sdk 方法登陆,进行收发消息等操作(没有实现ui,都需要再控制台查看) 在这里插入图片描述
    NPM方式集成:
  4. vue-demo 目录下使用npm install安装,最新的音视频sdk,也支持 npm安装引用了
	npm install easemob-websdk --save
	npm install easemob-webrtc --save
	npm install easemob-emedia --save
  1. 新版本 3.0 的sdk,不需要storphe 文件,所以只要在本地引入 WebIMConfig.js 文件就可以了
  2. 进行初始化,直接复制文档
    这里注意下,使用最新的3.0 sdk,初始化中填写的 appKey 其中 K一定要大写,不然就会出现发送消息失败的情况
	//初始化SDK
	var conn = {};
   	WebIM.config = config;
   	conn = WebIM.conn = new WebIM.connection({
   		appKey: WebIM.config.appkey,
   		isHttpDNS: WebIM.config.isHttpDNS,
   		isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
   		https: WebIM.config.https,
   		url: WebIM.config.xmppURL,
   		isAutoLogin: false,
   		heartBeatWait: WebIM.config.heartBeatWait,
   		autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
   		autoReconnectInterval: WebIM.config.autoReconnectInterval,
   		isStropheLog: WebIM.config.isStropheLog,
   		delivery: WebIM.config.delivery
   	})
   	//初始化单人音视频,直接
   	
   		……复制文档内容
   	
   	//注册SDK监听回调
   	conn.listen({
     	onOpened: function(message) {
       //连接成功回调
       // 如果isAutoLogin设置为false,那么必须手动设置上线,否则无法收消息
       // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
       // 则无需调用conn.setPresence();
    	 },
     	onClosed: function(message) {}, //连接关闭回调
    	onTextMessage: function(message) {}, //收到文本消息
     	onEmojiMessage: function(message) {}, //收到表情消息
     	onPictureMessage: function(message) {}, //收到图片消息
     	onRoster: function(message) {}, //处理好友申请
     	onInviteMessage: function(message) {}, //处理群组邀请
     	onOnline: function() {}, //本机网络连接成功
     	onOffline: function() {}, //本机网络掉线
     	onError: function(message) {}, //失败回调
     	onReceivedMessage: function(message) {}, //收到消息送达服务器回执
     	onDeliveredMessage: function(message) {}, //收到消息送达客户端回执
     	onReadMessage: function(message) {} //收到消息已读回执
     })
     //音视频回调,多人会议回调
   		……复制文档内容
  1. 在项目中引入文件
   import websdk from "easemob-websdk"
   import webrtc from "easemob-webrtc"
   import emedia from "easemob-emedia"
   //这里我还引入了初始化的文件
  1. 调用sdk中的 conn.open方法登陆
	var options = { 
 		apiUrl: WebIM.config.apiURL,
 		user: 'username',
 		pwd: 'password',
 		appKey: WebIM.config.appkey
   	};
   	conn.open(options);
  1. 打开命令行,通过npm run dev 启动测试即可

下面是遇到的一些问题,记录下:
Q:提示出现 eslint 问题
A:在webpack.base.conf.js 文件中如图注释 (这里是测试的时候将eslint检查直接干掉了)在这里插入图片描述
Q:出现这个的提示在这里插入图片描述
A: 在webpack.base.conf.js如图添加配置unknownContextCritical: false,exprContextCritical: false,在这里插入图片描述
Q:还有会出现demo 登陆失败的问题,在环信的ui 上提示多次登陆
A:3.0 版本,可以这样解决,在涂抹处改成自己的ip或者域名等信息
在这里插入图片描述
Q: 页面打开控制台报错
在这里插入图片描述
A: 这个在使用本地文件集成的时候, 需要这样初始化
conn = WebIM.conn = new WebIM.default.connection({})

(≧▽≦)/啦啦啦,OK了。

展开阅读全文

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