实现webIM技术小结——websocket IM原理篇

继续总结webIM实现的核心技术-websocket,以及socket.io的总结归纳~~

IM通讯协议

应用场景:

  1. 即时通信          聊天
  2. 消息推送          好友上线,微博被赞
  3. 其他领域          股票价格/商品拍卖/监控报警

协议种类:

协议用途:数据封装与传输,连接有效性检测,消息接收保证

  • 私有协议           
    • 二进制:QQ
    • 文本: MSN
  • 公共协议
    • XMPP(可扩展通讯和表示协议):Google talk, vesper, 消息基于XML 
    • SIP:微软,IBM
    • Bayeux:comet,消息基于json

XMPP

开源服务器端:
openfire 支持上万并发 ejabber 高效,支持分布式
android客户端: www.beem-project.com

音视频协议:

  1. rtmp
    flash插件
  2. WebRTC
    支持html5
    适合哪些场景?

WebIM多种实现方式

  1. Ajax短轮询,不需要服务器端特殊支持html5的WebSocket(webrtc) html5的event source
  2. flash XMLSocket、java applet套接字
  3. comet
    基于 HTTP长连接、无须在浏览器端安装插件的”服务器推”技术为“Comet”
    a)长轮询
    b)iframe streaming
  4. html5的WebSocket(webrtc)
  5. html5的event source

短轮询Ajax的特点:

     优点: 标准http,服务端不需要定制

     缺点: 消耗大量网络资源,服务器需要频繁查询大量数据,不实时

长轮询comet的特点:

     优点:

     缺点:

  • 节约资源
  • 响应比较及时,是实时的
  • 浏览器兼容性好
  • 服务器需要维持连接,占用一定资源

iframe Comet

    优点:

  • 页面嵌入隐蔽iframe,src指向长连接请求不断开content-encoding:chunked
  • 服务器一直往src写入js数据获取消息

    缺点:

  • 无需重复发起连接
  • 浏览器会一直显示加载状态

html5 event source

    优点:

  • 客户端与服务端建立连接后不断开
  • 服务器有事件才返回数据
  • 只能在同一个域下
  • 服务器单向       

html5 websocket

  •  按需双向通信
  • 可在不同域和event sounce一样,浏览器兼容性有限

web IM开源框架

nginx-push-stream-module WebIM神器

特点

comet成熟的开源框架

  • 基于web server
  • 独立server

   dwr(java) pushlet(java) nginx-push-stream-module
   cometd(java)
   icomet(c++)
   ice: http://www.zeroc.com/chat/index.html

客户端都是js、html

**各框架比较 **
1、icomet
性能极高,支持上百万连接
自带验证,客户端
2、nginx-push-stream-module
功能多,支持几十万连接
3、dwr、pushlet
和java代码结合紧密
#音视频解决方案

主流技术
1、rtmp
2、WebRTC
音视频:NetStream
消息和文本:ShareObject https://github.com/arut/nginx-rtmp-module
完全无插件
演示:https://meet.jit.si/ 源码:https://github.com/jitsi/jitsi-meet

WebRTC技术
1、MediaStream: 通过设备的摄像头及话筒获得视频、音频的同步流 2、RTCPeerConnection: 是WebRTC用于构建点对点之间稳定、高效的流传输的组件 3、RTCDataChannel: 使得浏览器之间(点对点)建立一个高吞吐量、低延时的信道,用于传 输任意数据

#生产环境选择及问题

选择WebIM
需要支持人数
可靠性
支持的平台
熟悉的开发语言
是否和其他软件融合
完善生产环境
1、数据保存 2、安全验证 3、单点故障

 

 

 

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你好!要在UniApp小程序中接入环信IM,你可以按照以下步骤进行操作: 1. 首先,你需要在环信官网(https://www.easemob.com/)注册一个账号,并创建一个应用获取AppKey。 2. 在UniApp项目中安装并引入环信IM的SDK。你可以通过npm或者手动下载方式进行引入,具体可以参考环信官方文档。 3. 在UniApp项目的manifest.json文件中配置环信IM的权限。在"uni-app" -> "easycom" -> "custom"字段中添加如下代码: ``` "easemob-im": "@/plugins/easemob-im/easemob-im.js" ``` 4. 创建一个easemob-im.js的文件,并在该文件中进行环信IM的初始化和登录操作。你可以根据需要在登录成功后进行一些自定义的操作,比如获取会话列表等。示例代码如下: ```javascript import { WebIM } from '@/plugins/easemob-im/WebIM' export function initEasemobIM() { const options = { isMultiLoginSessions: WebIM.config.isMultiLoginSessions, xmppURL: WebIM.config.xmppURL, apiURL: WebIM.config.apiURL, appKey: WebIM.config.appkey, ... // 其他配置项 } WebIM.conn.listen({ ... // 监听事件 }) WebIM.conn.open(options) } export function login(username, password) { const options = { apiUrl: WebIM.config.apiURL, user: username, pwd: password, ... // 其他配置项 } return new Promise((resolve, reject) => { WebIM.conn.open(options, () => { resolve() }, (err) => { reject(err) }) }) } ``` 5. 在你的UniApp页面中使用环信IM功能。你可以在需要使用IM功能的页面中引入前面创建的easemob-im.js文件,并调用其中的函数进行初始化和登录操作。比如,在登录页面的methods中调用login函数进行登录,并在其他页面中调用initEasemobIM函数进行初始化。 这样,你就完成了UniApp小程序接入环信IM的操作。当然,根据你的具体需求,你还可以进一步进行会话、消息等功能的开发。希望对你有所帮助!如果还有其他问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值