学习--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识别长串数字为电话

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)

你可能感兴趣的:(学习--websocket实现原理)