Web IM 介绍

环信 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中可以用到的图标示例

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

使用 Web IM Demo 与好友进行视频聊天的操作说明：Web IM Demo视频聊天使用说明

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. 首先将本源码克隆到本地

$ git clone https://github.com/easemob/web-im.git

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

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

$ git clone https://github.com/easemob/web-im.git

2. 去官网安装NodeJS，建议4+

• 因为整套代码需要依赖于npm NodeJS的包管理工具，安装NodeJS会默认安装NPM工具

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

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

npm i

4. 上述步骤成功后

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

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

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

$ git clone https://github.com/wytheme/webim-ie8

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

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

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

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

参考：环信知识库

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

1. 去工单系统提问题

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

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

开启控制台 以Chrome为例