请选择 进入手机版 | 继续访问电脑版

默认
打赏 发表评论 0
想开发IM:买成品怕坑?租第3方怕贵?找开源自已撸?尽量别走弯路了... 找站长给点建议
即时通讯框架MobileIMSDK的H5端基本介绍
微信扫一扫关注!

一、技术准备


1.1您是否已对Web端即时通讯技术有所了解?


如果您对Web端即时通讯技术尚不了解,则请进入以下链接学习:


1.2您需要对WebSocket技术有所了解


如果您已经掌握WebSocket技术则请跳过本节,否则请继续往下看。

因为要使用HTML5的WebSocket作网络通信技术,为了用好它,建议您还是应该深入的学习一下它的理论知识更为稳妥。

到底什么是WebSocket?

WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。WebSocket的出现,首次让Web端具备了无门槛的全双工实时通讯能力! 好吧,看起来牛逼哄哄的样子,那怎么开始学习WebSocket理论知识呢?您可以通过网络查找相关WebSocket的学习资料(WebSocket技术非常热门,很容易找到学习资料),也可以通过我精心收集的资料作为学习的开始。请继续往下看。


》学习WebSocket第一步 - 基础知识:


》学习WebSocket第二步 - 知识进阶:


》WebSocket标准文档、API手册:


二、支持作者


付费捐助的存在,是作者目前为数不多的物质支撑,如果您希望 MobileIMSDK 系列能够持续发展下去,并使得您的项目能够得到它持久的回馈,您的任何一笔捐助都意义非凡。Jack Jiang依托即时通讯网长期提供即时通讯技术的分享和传播,这里的技术资源和技术支持毫无疑问是您能找到的最低成本且是最优质的,您的支持是我们继续下去的动力!

MobileIMSDK-H5端工程目前没有开源版,但您可通过捐助作者的方式获取精编注释版,非常抱歉给您带来不便。

捐助作者得 MobileIMSDK的H5端精篇源码和资料:
资源名称包含内容捐助金额捐助方式发货方式专享技术支持
<精篇源码>• 1、SDK精编注释源码
• 2、简明Demo源码

399淘宝链接付款后发货1、VIP技术群
2、论坛讨论区
3、一对一交流、永久免费升级
<手册教程>• 3、详尽开发者指南(共15页)

h5.jpg
taobao.com/item.htm?id=621500349058

三、基本介绍


MobileIMSDK的H5端是一套纯JS编写的基于标准WebSocket的即时通讯库:

  • 1)超轻量级、极少依赖;
  • 2)纯JS编写、高度提炼,简单易用;
  • 3)基于标准WebSocket协议,客户端兼容性好;
  • 4)支持运行于iOS、Android等移动端浏览器和各种PC端浏览器;
  • 5)能与 MobileIMSDK的各种APP原生代码客户端完美互通;
  • 6)可应用于手机端/PC端的网页聊天应用、企业OA、Web端等即时通讯场景。

四、与MobileIMSDK的关系


MobileIMSDK-H5端是基于标准HTML5的WebSocket协议的 MobileIMSDK客户端库。

以下是MobileIMSDK的通信架构图:
bbbb.png

五、与MobileIMSDK-Web的关系


MobileIMSDK-Web也是一套纯JS编写的Web端即时通讯框架(含服务端)。

MobileIMSDK-Web框架与MobileIMSDK-H5端的相同点:

  • 1)都是Web端即时通讯框架;
  • 2)都是纯JS编写;
  • 3)都可以运行在手机、pc端的浏览器或web容器内。

MobileIMSDK-Web框架与MobileIMSDK-H5端的不同点:

  • 1)MobileIMSDK-Web可以兼容不支持HTML5的旧版浏览器或容器,而MobileIMSDK-H5端必须运行在当前主流的HTML5浏览器或容器;
  • 2)MobileIMSDK-Web需依赖于socket.io这种第3方通信层库,而MobileIMSDK-H5端无任何额外依赖。

我该如何选择?

  • 选择一:如果您的应用必须兼容旧版浏览器(包括旧版IE等)
    那唯一的选择就是MobileIMSDK-Web,因为它存在的主要价值就是为了兼容旧版浏览器;
  • 选择二:如果您的应用只需运行在现今主流的HTML5浏览器或容器
    那么建议您优先使用MobileIMSDK的H5端,必竟直接调用标准HTML5的WebSocket API,要简洁、轻量多了,也没有第3方依赖。

六、源码和手册获取


MobileIMSDK-H5端工程目前没有开源版,您可通过捐助作者的方式获取精编注释版(同时您也将立即获得作者的专享技术支持),详见文首“支持作者”部分,感谢您的理解与支持。

或者直接点击链接:SDK精编注释源码 + 简明Demo源码 + 详尽开发者手册(共15页)(付款后将发货到您的关联邮箱)。

七、设计目标


直接使用原生的WebSocket有以下问题和劣势:

  • 1)功能有限:没有提供心跳保活、断线重连、送达保证(重传和去重)等即时通讯关键算法和逻辑;
  • 2)API 简陋:在如此有限的标准API下,能逻辑清晰地实现并组合心跳保活、断线重连、送达保证等算法,需要相当高的技术掌控力
  • 3)逻辑耦合:经验欠缺的开发人员,会将WebSocket通信代码与前端UI界面代码混在一起,使得UI界面的重构、维护、改版都非常困难。

针对以上问题,而MobileIMSDK-H5端库将让开发者专注于UI应用层的开发,网络通信层的专业代码交由SDK开发人员,从而解偶UI前端和通信层的逻辑耦合性,大大降低技术复杂性。

总结一下,MobileIMSDK-H5端库的设计目标是为您的Web端IM带来以下便利:

  • 1)前端与通信解偶:前端UI与网络通信代码解耦,UI界面的重构、维护、改版都非常容易和优雅;
  • 2)轻量级和兼容性:受益于标准WebSocket,可很好地运行于现今主流的H5浏览器上,且无需额外依赖;
  • 3)核心内聚和收敛:得益于长期的提炼和经验积累,SDK核心层高度封装,开发者无需理解复杂算法即可简单上手。
  • 4)纯JS轻量级实现:SDK为纯JS编写,无Angular、EmberJS、VUE等各种重量级前端框架依赖,方便对接各种既有系统;

八、技术亮点


  • 轻量易使用:超轻量级——纯JS编写且极少依赖,高度提炼——简单易用;
  • 兼容性很好:基于标准WebSocket,可很好地运行于现今主流的H5浏览器上,且无需额外依赖;
  • 断网恢复能力:拥有网络状况自动检测、断网自动治愈的能力;
  • 支持多种设备:支持运行于iOS、Android等移动端浏览器和各种PC端浏览器;
  • 通信协议封装:实现了一个对上层透明的即时通讯通信协议模型;
  • 身份认证机制:实现了简单合理的身份认证机制;
  • 完善的log信息:在开发调试阶段,确保每一个算法关键步骤都有日志输出,让您的运行调试更为便利;
  • 前端代码解耦:实现了UI前端代码与sdk网络通信代码解偶,防止前端代码跟IM核心代码混在一起,不利于持续升级、重用和维护;
  • 聊天协议兼容:实现了与MobileIMSDK各APP端完全兼容的协议模型;

九、文件组成


SDK代码文件概览:
复件-QQ20160703-0.png

SDK代码文件用途说明:
文件详细说明.png

十、授权方式


授权方法:
完成捐助后,你即可永久自由地使用MobileIMSDK-H5端(包括后绪永久免费提供升级版),无需单独授权,如:用于研究、学习、甚至商业用途。MobileIMSDK为著作权作品,未经作者授权不可对MobileIMSDK任何部分原样进行二次出售(但基于此进行的后续演进和开发成果由您自行独享),请尊重知识产权。

版本升级:
精编注释版可永久免费获取最新版本,作者承诺在捐助者索取最新版本时,提供优先交付的保证。(另请参见《MobileIMSDK版本更新日志(该贴持续更新...)》)

获取授权书:
如您确实需要单独的正式授权书,请联系作者即可。授权书电子版(盖章有效)将发到您的指定邮箱,如还需寄送纸质授权书(盖章有效)则请补上邮费即可(快递收多少就是多少,无需多付)。

著作权证书:
c3.jpg

补充说明:如需获得更多技术支持或技术合作请联系作者,QQ:413980957。

十一、联系方式



c1.png        c2.png

十二、Demo运行截图


1)MobileIMSDK-H5端Demo在PC端浏览器运行效果:
MobileIMSDK-Web-Demo在PC端浏览器运行效果(单张-无macosx阴影).jpg

2)MobileIMSDK-H5端 Demo在手机端浏览器运行效果(点击可看大图 ▼):
【待处理!】MobileIMSDK-Web-Demo在移动端浏览器运行效果.jpg

3)MobileIMSDK-H5端 Demo在PC端主流浏览器的运行效果(点击可看大图 ▼):
MobileIMSDK-Web-Demo在PC端浏览器运行效果.jpg

附录:H5端开发者手册预览


开发者手册预览全图:手册详情点此进入  
缩略图清单-无阴影.jpg

即时通讯网 - 即时通讯开发者社区! 来源: - 即时通讯开发者社区!

上一篇:开源轻量级IM框架 MobileIMSDK v6.1.1 已发布!下一篇:即时通讯框架MobileIMSDK的H5端开发者手册(PDF导出图片)

本帖已收录至以下技术专辑

推荐方案
打赏楼主 ×
使用微信打赏! 使用支付宝打赏!

返回顶部