当前位置: 首页 > Web前端 > HTML5

说说web端的即时通讯

时间:2023-04-05 14:09:42 HTML5

说说web端的即时通讯Web端的即时通讯有哪些实现方式?-短轮询长轮询iframe流FlashSocket轮询客户端发送Ajax请求到服务器每隔一段时间,服务器收到请求后,立即返回响应信息并关闭连接。客户端向服务器发送Ajax请求,服务器收到请求后保持连接,并返回响应消息并关闭连接,直到有新消息为止。客户端处理响应消息后,向服务器发送新的请求,并在页面中嵌入一个隐藏的iframe,将这个隐藏iframe的src属性设置为长连接请求或xhr请求,服务器会不断嵌入一个使用Socket类的Flash程序JavaScript进入客户端输入数据页面,通过调用这个Flash程序提供的Socket接口与服务端的Socket接口进行通信。优点:写后端程序比较容易。在没有消息的情况下,不会有频繁的请求,消耗资源,兼容小浏览器,实现真正的即时通信,而不是伪即时通信。消息立即到达,不发送无用请求的缺点是浪费带宽和服务器资源。在服务器上保持长连接会增加开销。IE和MozillaFirefox会显示加载未完成,图标会继续旋转。服务器保持长连接会增加开销。客户端必须安装Flash插件;非HTTP协议不能自动穿越防火墙。该实例适用于小型应用程序。WebQQ、Hi网页版、FacebookIM。Gmail聊天网络互动游戏iframe流媒体前端实现步骤:将iframe设置为不显示。src设置为请求的数据地址。定义一个父级函数,让iframe子页面调用传递数据给父页面。定义onload事件,服务器超时后重新加载iframe。后台输出内容:当有新消息时,服务端会在iframe中输入一段js代码:println("");用于调用父函数传递数据。WebsocketVSSSEwebsocket简介WebSocket是HTML5提供的一种在单个TCP连接上进行全双工通信的协议。在WebSocketAPI中,浏览器和服务器只需要进行一次握手,浏览器和服务器之间就形成了一个快速通道。两者之间可以直接传输数据。websocket兼容性websocket相关应用社交聊天弹幕多屏互动多人游戏协同编辑股票基金实时行情体育直播更新视频会议/聊天在线教育智能家居等对实时性要求高的场景webpack-dev-serveretc...Main类库socket.io(https://github.com/socketio/s...ws(https://github.com/websockets...以socket.io为例servervarapp=require('koa')();varserver=require('http').createServer(app.callback());vario=require('socket.io')(server);io.on('connection',function(){//监听事件socket.on('eventB',function(){/**/});//向socketsocket.emit('eventA',/**/);});server.listen(3000);前端自己实现的一个demo,就是你的一个简单版本我猜地址在这里(https://github.com/jamielhf/n...SSE(Server-SentEvents)介绍HTTP协议不能主动从服务器推送信息。不过有一个变通办法,就是服务器向客户端发送终端声明接下来要发送的东西是流式传输。也就是说,发送的不是一次性的数据包,而是数据流,会连续发送。此时客户端不会关闭连接,而是一直等待服务器发送新的数据流。视频播放就是一个例子。从本质上讲,这种通信是以流式信息的形式完成长时间的下载。SSE兼容性SSE实际客户端if(typeof(EventSource)!=="undefined"){varsource=newEventSource("http://localhost:3001/stream");//onopenonerrorsource.onmessage=function(event){document.getElementById("result").innerHTML+=event.data+"
";};}else{document.getElementById("result").innerHTML="抱住,你的浏览器不支持服务器发送的事件...";}服务端varhttp=require("http");http.createServer(function(req,res){varfileName="."+req.url;if(fileName==="./stream"){res.writeHead(200,{“Content-Type”:“text/event-stream”,“Cache-Control”:“no-cache”,“Connection”:“keep-alive”,“Access-Control-Allow-Origin”:'*',});res.write("data:"+(newDate())+"\n\n");interval=setInterval(function(){res.write("data:"+(newDate())+"\n\n");},1000);req.connection.addListener("close",function(){clearInterval(interval);},false);}}).listen(3001,"127.0.0.1");与基于TCP长连接通信http的WebsocketSSE(Server-SentEvents)通信方式相比,http的优点是全双工通信协议,性能开销小,安全性高,具有一定的可扩展性,易于实现,开发成本低,支持断开重连默认情况下。缺点:传输数据需要二次分析,增加开发成本和难度。浏览器兼容性问题。单向原始地址。了解Websocket原理https://www.zhihu.com/questio...Server-SentEvents教程