文档反馈
文档反馈
通用 > Demo源码导读 > 即时通讯Demo-源码导读 > Web源码导读

网易云信web demo简介

网易云信demo工程基于网易云信webSDK，演示了SDK聊天，群组，点对点音视频等功能。用户可参照该demo，将网易云信SDK接入自己的app。

预览demo

demo地址https://github.com/netease-im/NIM_Web_Demo

将工程克隆到本地，使用静态服务启动本工程。

例：node环境工程部署

  1. npm install
  2. node app
  3. 在浏览器中访问 http://127.0.0.1:8888/webdemo/index.html

注：必须启服务预览demo文件（node服务只是一个例子，并非必须）

IM功能

源码结构

依赖SDK文件 NIM_Web_SDK.js, NIM_Web_NIM.js(版本号这里略去了)，此外demo依赖jQuery ,并使用了部分JQueryUI插件

功能点指引

SDK初始化

用正确地appKey（在管理后台可以查看应用的appKey），account（帐号），token（帐号的token，用于建立连接，demo中使用md5加密的方式来登录，而管理后台创建的测试帐号直接使用即可）以及自定义回调方法来连接SDK并将sdk返回的消息，好友，群等数据保存到自己的数据缓存中。

在SDK同步数据完成后，开始页面渲染。

缓存数据

cache.js中封装各种数据的增删改查

friendslist:好友列表

personlist:用户信息map

teamlist:群列表

teamMap:群信息map

msgs：消息对象集合

sessions:当前会话列表

blacklist,mutelist:黑名单静音列表

sysMsgs,customSysMsgs :系统消息 ，自定义系统消息

消息处理

message.js的doMsg方法处理sdk的onmsg方法回调。如果消息的类型为群通知，则转交给noticication.js来处理。在收到消息后，调用cache.js的addMsg方法，缓存数据，最后刷新会话、聊天UI。

流程如下：收到消息 ---> 消息存储 ---> UI渲染

发送消息处理

message.js里sendTextMsg,uploadFile方法提供发送文本，文件功能。发送后通过sendMsgDone回调方法来处理发送后的业务逻辑，同消息处理。

聊天室功能

源码位于webdemo/chartroom下

源码结构

依赖SDK文件 NIM_Web_NIM.js, NIM_Web_Chartroom.js(版本号这里略去了)

目录简介

核心代码

开发思路

初始化SDK

监听消息通知 —> UI渲染

点对点(pcAgent、WebRTC)音视频

源码位于webdemo/im/js/module下

多人(pcAgent、WebRTC)音视频

源码位于webdemo/im/js/module下

源码结构

依赖SDK文件 NIM_Web_Netcall.js (版本号这里略去了) 依赖SDK文件 NIM_Web_WebRTC.js (版本号这里略去了)

核心代码

点对点白板

源码位于webdemo/im/js/module下

源码结构

依赖SDK文件 NIM_Web_WhiteBoard.js (版本号这里略去了)

Demo中白板额外加入了音频通话的功能，因此需要依赖音频相关的SDK，进行开发时也可以只使用白板本身，不使用音频功能。 音频部分依赖SDK文件 NIM_Web_Netcall.js (版本号这里略去了) 以及 NIM_Web_WebRTC.js (版本号这里略去了)

另外为了简化代码，白板界面通过Vue框架编写，源码中尽可能减少UI操作逻辑，只包含业务逻辑。

核心代码

修改代码为已用

网易云信demo实现了一个IM软件的所有基础功能，开发者可直接以demo为基础，自定义相关样式，开发自己的IM软件，也可以参考demo中sdk API使用方式自行开发。

注：云信只提供消息通道，并不包含用户资料逻辑。开发者需要在管理后台或通过服务器接口将用户账号和token同步到云信服务器。

相关文档

相关产品

×

反馈成功

非常感谢您的反馈，我们会继续努力做得更好。
确定