Vue 简单集成环信SDK

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

准备工作

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

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

二、 查找对应的 SDK 文件
2.0 版本还是需要storphe文件，音视频sdk 不支持直接 npm install

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

3.0 版本直接引入需要的IM SDK 和 音视频 SDK 即可

4. WebIM/sdk 目录下，直接查找文件即可 或 直接 npm install 需要的SDK
5. EMedia_x1v1.js 包含单人音视频和多人音视频功能，EMedia_sdk 只有多人音视频功能

集成操作

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

1. 使用以下命令全局安装vue-cli

	npm install -g vue-cli 

2. 使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称。
   并配置需要安装的vue环境
   
3. 进入文件，运行

	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

5. 新版本 3.0 的sdk，不需要storphe 文件，所以只要在本地引入 WebIMConfig.js 文件就可以了
6. 进行初始化，直接复制文档
   这里注意下，使用最新的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) {} //收到消息已读回执
     })
     //音视频回调，多人会议回调
   		……复制文档内容

8. 在项目中引入文件

   import websdk from "easemob-websdk"
   import webrtc from "easemob-webrtc"
   import emedia from "easemob-emedia"
   //这里我还引入了初始化的文件

9. 调用sdk中的 conn.open方法登陆

	var options = { 
 		apiUrl: WebIM.config.apiURL,
 		user: 'username',
 		pwd: 'password',
 		appKey: WebIM.config.appkey
   	};
   	conn.open(options);

10. 打开命令行，通过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了。
此简单Demo 的地址：https://github.com/lizgDonkey/Vue-demo