本文主要用于解决业务场景中如何选择合适的方法进行数据交换( form , xhr, fetch, sse, webstock, postmessage， web workers等)。并列举了一示些示例代码， 可能存在不全的地方欢迎大家补充。
本文用到的源代码都放在

websocket 双向通信
#boxwarp > p{
border: 1px solid #ccc;
padding:10px;
margin:10px;
发点什么
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('p');
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);
说完了 客户端与服客端之间的通信，现在我们来聊聊客户端之间的通信!
客户端与客户端页面之间的通信 postmessage
主要特点
1. window.postmessage() 方法可以安全地实现跨域通信
2.主要用于两个页面之间的消息传送
3. 可以使用iframe与window.open打开的页面进行通信.
特别的应用场景
我们的页面引用了其他的人页面，但我们不知道他们的页面高度，这时可以通过window.postmessages 从iframe 里面的页面来传到 当前页面.
语法
otherwindow.postmessage(message, targetorigin, [transfer]);
示例代码
postmessage.html (入口)
postmessage示例
html,body{height: 100%;}
*{padding: 0; margin:0;}
.warp{ display: flex; }
.warp > p,
.warp > iframe{
flex: 1;
iframe{
height: 600px;
左边页面
右边页面
向左边的(iframe)推送信息代码
向右边的(iframe)推送信息代码
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');
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);
post1.html
document
.sendbox{
background: #efefef;
margin-bottom: 10px;
直接发送到右边iframe
左边的iframe
document.getelementbyid('sendbox2').addeventlistener('click', function(){
window.parent.post2.postmessage('收到来自左边ifarme的消息' + +new date(),'*');
function addbox(html){
var item = document.createelement('p');
item.innerhtml = html;
document.getelementbyid('box2').append(item);
addbox(e.data);
post2.html
background: #ccc;
中转到左边
直接到左边
右边的iframe
document.getelementbyid('sendbox').addeventlistener('click', function(){
/*- 向父级页面传 -*/
window.parent.postmessage('来自post2的消息' + +new date(),'*');
window.parent.post1.postmessage('直接来自右边' + +new date(),'*');
document.getelementbyid('box').append(item);
web workers 进程通信(html5中的js的后台进程)
javascript设计上是一个单线，也就是说在执行js过程中只能执行一个任务, 其他的任务都在队列中等待运行。
如果我们执行大量计算的任务时，就会阻止浏览器执行js，导致浏览器假死。
html5的 web workers 子进程 就是为了解决这种问题而设计的。把大量计算的任务当作类似ajax异步方式进入子进程计算，计算完了再通过 postmessage通知主进程计算结果.
主线程代码(index.html)
.box-warp > p{
开启一个后台线程(点击外框中止线程)
var id = 1;
function init_works(){
var warpid = 'box'+id;
box.id = warpid;
var worker = new worker('./compute.js');
//监听后台进程发过来的消息
worker.onmessage= function (event) {
// 把子线程返回的结果添加到 p 上
document.getelementbyid(warpid).innerhtml += event.data+
;
//点击中止后端进程
box.addeventlistener('click', function(){
worker.postmessage(oh, 我被干掉了 + warpid);
var time = settimeout(function(){
worker.terminate();
cleartimeout(time);
},0);
//往后台线程发送消息
worker.postmessage(hi, 我是 + warpid);
id++;
document.getelementbyid('btn').addeventlistener('click', function(){
init_works();
后台进程代码( compute.js )
var i=0;
function timex(){
i++;
postmessage(i);
if(i>9){
postmessage('no 我不想动了');
close(); //中止线程
settimeout(function(){
timex();
},1000);
//收到主线程的消息
onmessage = function (oevent) {
postmessage(oevent.data);
上述代码简单的说明一下， 主进程与后台进程之间的互相通信.
广告 : 最近忙的项目【携程运动】上线拉!!!.