学习--websocket实现原理

聊天 客服 在线咨询 即时通讯 喜欢使用     第三方服务 环信

即时通讯 实现原理有两种

1ajax轮询

使用定时器，每隔1s时间，发送ajax到后台

2websocket（常用）有一个好用的封装的socket.io

一般在公司直接买一个，我们需要引入他的js

 

原生js支持的websocket建立链接后 就不会再断，相当于打电话，只要不挂断就一直通讯

1：前端必须按照步骤写上链接websocket  2:后台也需要对应连接上websocket

1:new websocket('xx://xxx:xxx')

2:链接建立 websocket.onopen

3：收到后台发来消息就会执行 websocket.onmessage

发生错误，链接出错 websocket.onerror

 

sokect.io封装了websocket

1：引入socket.io.js

2:调用io链接，var socket = io()

3:发消息到后台  socket.emit('自定义的'，参数) 

4：接受消息 socket.on（“自己定义的”，function(){}） 监听

 

 

后台 node.js php java都类似

1：引入socket

2:调用io链接 io.on('connection')

3:发消息到前端 socket.emit

4:后台监听emit过来 socket.on  :socket.emit('自定义的'，参数)

 

 

##移动端的兼容问题

1：禁止图片点击放大

部分安卓手机点击图片会放大，如需要禁止放大，只需要设置css属性

img{

pointer-events:none;

}

这个会让img标签的点击事件失效，如果想要给图片添加点击事件就给上面再写一层

2：禁止ios识别长串数字为电话

<meta name="format-detection" content="telephone=no">

3:禁止复制，选中文本

设置css属性， -webkit-user-select:none

4:一些情况下对非可点击元素 如label span 监听点击事件，不会在ios下触发，css增加sursor.pointer

5:上下拉滚动条时卡顿、慢

body{

    -webkit-overflow-scrolling:touch;

    overflow-scrolling:touch;

}

Android3+和ios5+支持css3的新属性为overflow-scrolling

6:安卓不会自动播放视频

安卓autoplay没效果，需要手动触发一下

window.addEventListener('touchstart',function(){

  audio.play();

},false)