====== Web IM 介绍 ======
<WRAP round tip>
**注意：**

Web SDK 已更新至 V1.4.12 版本，从 V1.1.2 版本开始和 V1.1.1 差异较大，如果您是 Web SDK 的新用户，请参考本文档集成最新版本。如果您已集成 V1.1.1，并希望再次了解其集成方式，可参考[[im:400webimintegration:websdk1.1.1|Web SDK V1.1.1 集成说明]]。 新版的sdk保证兼容旧版sdk的所有接口，同时提供了一些新的接口，所以新版的sdk可以直接替换旧版的sdk，您可以根据自己的实际情况选择是否需要使用最新的接口，建议使用最新版本的接口。

</WRAP>
----
===== 什么是环信 Web IM Demo =====

环信 Web IM Demo 展示了怎样使用环信 Web IM SDK 快速创建一个完整的类似微信的网页聊天示例。展示的功能包括：

  * 登录、登出、操作好友、收发个人消息/群组消息等
  * 分页查看公开群，根据id搜索公开群
  * 好友之间可以通过webrtc进行视频聊天（仅支持 https + Webkit浏览器）
  * 支持同一账号最多8个标签页登录（''isMultiLoginSessions:true''）
  * http访问加入ip策略功能，防止DNS劫持（''isHttpDNS:true''）

环信 Web IM 源代码已在 GitHub 上开源供开发者下载 https://github.com/easemob/web-im，以帮助开发者更好的学习了解环信 SDK。

Demo使用react框架，支持IE9+、Chrome54+、Firefox等高级浏览器。SDK支持IE8+。聊天室功能支持IE10+。视频通话功能只支持https+Webkit浏览器。

Web IM Demo 及 SDK 目录简要说明：
  * demo：demo相关静态资源文件。包括脚本、样式、语言包、Appkey配置文件（/demo/javascript/dist/webim.config.js）等
  * sdk：WebIM SDK
  * package.json: 构建环境依赖文件。需要安装npm环境，终端执行sudo npm intall等待安装完成
  * webpack.config.js: webpack配置文件
  * demo/stylesheet/src/font/demo.html: Demo中可以用到的图标示例

===== Web IM 功能演示 =====

点击http://webim.easemob.com 对 Web IM 进行体验，账号为环信Demo的账号（与 Android、iOS 的 Demo 账号相同）。

使用 Web IM Demo 与好友进行视频聊天的操作说明：{{:im:400webimintegration:web_im_demo_video_call_user_s_guide.pdf|Web IM Demo视频聊天使用说明}}

===== Web IM 功能说明 =====

Easemob Web IM SDK 已支持如下功能：

  * SDK 本身已支持 IE9+、FireFox10+、Chrome54+、Safari6+ 之间文本、表情、图片、音频、地址消息相互发送。
  * SDK 支持 Web 端之间，Web 端与 Android/iOS端相互添加、删除好友功能。
  * SDK 支持与iOS、Android SDK 之间相互发送文本、表情、图片、音频、地址消息。
  * SDK 对于消息的处理方式如下：
    * 文本、表情消息，直接发送、接收。
    * 附件消息（图片、音频、文件等），SDK上传附件到服务器，然后发送附件基本信息（发送方上传的附件URL、文件名等），接收方根据附件的URL、secret和自身的登录信息，以流的形式从服务器上下载到本地处理。
  * 提供Demo，方便大家参考，已实现聊天添加/删除好友/群组功能。备注：
    * Demo默认支持的图片消息格式：PNG、JPG、BMP、GIF
    * Demo默认支持的音频消息格式：MP3、AMR、WMV
    * Demo默认支持的文件消息格式：zip、txt、doc、PDF


===== 搭建本地测试环境 =====

搭建环境之前需要对环信提供的参考文档有个初步的了解，大致分下面三种形式，请根据下面的关键字选择一个或多个源码参考

  * **简单版** 简化版的demo，关键字：纯html+js，接口清晰
  * **完整版** 基于react开发的完整的实时demo，关键字：至少IE9，完整流程，webpack+react
  * **IE8版** 基于IE8准备的特殊demo，关键字：IE8

==== 简单版 ====

1. 首先将本源码克隆到本地

<code bash>
$ git clone https://github.com/easemob/web-im.git
</code>

2. 直接双击打开或者浏览器访问 sdk/demo.html 均可

==== 完整版 ====

1. 首先将本源码克隆到本地

<code bash>
$ git clone https://github.com/easemob/web-im.git
</code>

2. 去官网安装[[https://nodejs.org/zh-cn/|NodeJS]]，建议4+

  * 因为整套代码需要依赖于[[https://www.npmjs.com/|npm]] NodeJS的包管理工具，安装NodeJS会默认安装NPM工具

3. 定位到web-im目录 在终端执行下面的命令，安装测试所需要的依赖模块

  * 保证此过程没有error终止为成功，如果有错误中断，请保留错误日志并再次尝试，大多数情况是网络原因导致的无法连接而中断

<code bash>
npm i
</code>

4. 上述步骤成功后

<code bash>
# 启动测试环境
npm run dev
# 打包发布，发布后文件在 web-im/publish 目录下
npm run prod
</code>

5. 浏览器访问即可看到测试页面：http://localhost:3000/
==== IE8版 ====

1. 首先将本源码克隆到本地

<code bash>
$ git clone https://github.com/wytheme/webim-ie8
</code>

2. 直接双击打开或者浏览器访问 demo.html 均可

3. 如果浏览器IE8且需要使用上传功能，比如发送图片之类，继续下面的流程。需要以web服务器访问对应的源码

  * Mac下建议安装xmpp、 Windows下建议安装xampp 软件

4. 已安装对应的软件，请将服务器跟目录设置到 web-im，设置之后启动服务 访问 demo.html

===== 常见问题 =====

参考：[[https://im.tickets.easemob.com/kb/index.php|环信知识库]]

还有疑问，不知如何处理？

1. 去[[https://im.tickets.easemob.com/|工单系统]]提问题

2. 工单描述应该包括并不仅限于以下信息

  * 您的页面访问地址？
  * 提供一下您的webim.config.js中的apiUrl、xmppUrl、appKey和您的测试登录账号密码？
  * 您的页面的连接是否正常建立，onOpen 的监听操作是否触发？
  * 提供一下所有控制台的日志信息（如何开启控制台见下图）

开启控制台 以Chrome为例

{{:im:400webimintegration:631797ea288988d131b35ec9ffbd6211.jpg?nolink|开启Chrome控制台}}






----
<WRAP group>
<WRAP half column>
上一章节：[[im:350linuxsdkintegration:10sdkintegration|Linux SDK集成]]
</WRAP>

<WRAP half column>
下一页：[[im:400webimintegration:20sdkintegration|集成方式]]
</WRAP>
</WRAP>