前端常用的通信技术(3)_H5之家 - 中国HTML5教程资源分享第一站

server-send events 是服务端往客户端单向推送的，如果客户端需要上传消息可以使用 WebSocket

客户端代码 var source = new EventSource(':7000/server');source.onmessage = function(e) { console.log('e', JSON.parse( e.data)); document.getElementById('box').innerHTML += "SSE notification: " + e.data + '<br />'; };

服务端代码

<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); //数据 $time = date('Y-m-d H:i:s'); $data = array( 'id'=>1, 'name'=>'中文', 'time'=>$time ); echo "data: ".json_encode($data)."\n\n"; flush(); ?> echo "event: ping\n"; // 增加 event可以多送多个事件 js使用 source.addEventListener('ping', function(){}, false); 来处理对应的事件

对于低版本的浏览器可以使用 eventsource polyfill

Yaffle/EventSource by yaffle

by Remy Sharp

rwaldron/jquery.eventsource by Rick Waldron

amvtek/EventSource by AmvTek

三、客户端与服务器双向通信 WebSocket

特点

1. websocket 是个双向的通信。

2. 常用于应用于一些都需要双方交互的，实时性比较强的地方(如聊天,在线客服)

3. 数据传输量小

4. websocket 是个持久化的连接

原理图

图片来源于网络. 侵删

这个的服务端是基于 nodejs实现的（不要问为什么不是php，因为 nodejs 简单些！)

server.js

client.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebSocket 双向通信</title> <style> #boxwarp > div{ border: 1px solid #ccc; padding:10px; margin:10px; } </style> </head> <body> <button id="btn">发点什么</button> <div id="boxwarp"></div> <script> var ws = new WebSocket("ws://127.0.0.1:2000/"); document.getElementById('btn').addEventListener('click', function() { ws.send('cancel_order'); }); function addbox(msg){ var box = document.createElement('div'); box.innerHTML = msg; document.getElementById('boxwarp').append(box); } ws.onopen = function() { var msg = 'ws已经联接'; addbox(msg); ws.send(msg); }; ws.onmessage = function (evt) { console.log('evt'); addbox(evt.data); }; ws.onclose = function() { console.log('close'); addbox('服务端关闭了ws'); }; ws.onerror = function(err) { addbox(err); }; </script> </body> </html>

说完了客户端与服客端之间的通信，现在我们来聊聊客户端之间的通信。

四、客户端与客户端页面之间的通信 postMessage 主要特点

1. window.postMessage() 方法可以安全地实现跨域通信

2.主要用于两个页面之间的消息传送

3. 可以使用iframe与window.open打开的页面进行通信.

特别的应用场景

我们的页面引用了其他的人页面，但我们不知道他们的页面高度，这时可以通过window.postMessages 从iframe 里面的页面来传到当前页面.

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

示例代码

postmessage.html(入口)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>postmessage示例</title> <style> html,body{height: 100%;} *{padding: 0; margin:0;} .warp{ display: flex; } .warp > div, .warp > iframe{ flex: 1; margin:10px; } iframe{ height: 600px; border: 1px solid #ccc; } </style> </head> <body> <div class="warp"> <div class="left"> 左边页面 </div> <div class="right"> 右边页面 </div></div><div class="warp"> <div class="left warp"> <iframe src="./post1.html" frameborder="0" id="post1" name="post1"></iframe> </div> <div class="right warp"> <iframe src="./post2.html" frameborder="0" id="post2" name="post2"></iframe> </div>  </div> <div class="warp"> <div class="left"><button id="postBtn1">向左边的(iframe)推送信息代码</button></div> <div class="right"><button id="postBtn2">向右边的(iframe)推送信息代码</button></div> </div> <script> document.getElementById('postBtn1').addEventListener('click', function(){ console.log('postBtn1'); var date = new Date().toString(); window.post1.postMessage(date,'*');});document.getElementById('postBtn2').addEventListener('click', function(){ console.log('postBtn2'); var date = new Date().toString(); window.post2.postMessage(date,'*');});window.addEventListener('message',function(e){ if(e.data){ console.log(e.data); console.log(e); window.post1.postMessage(e.data,'*'); }},false); </script> </body> </html>