WebSocket跨域问题解决

  WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通讯,同时容许跨域通信,是server push技术的一种很好的实现。咱们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。javascript

   项目中遇到javascript跨域问题,父页面和子页面要通讯,而且父子页面跨域,怎么办?java

  项目中要保证父子页面通讯是点对点,须要在服务端创建对父子页面WebSocket的对应关系,即父页面发的消息只被子页面收到,子页面的消息也只被父页面收到咱们作了如下工做,严格保证了web

WebSocket通讯是点对点:跨域

   一是创建WebSocket连接的URL加上时间戳保证通讯会话是惟一的;浏览器

       二是在服务端保证父子页面WebSocket一一对应关系。父子页面的WebSocket在Open时都会向服务端发出消息进行注册,创建Senssion之间的对应关系。而后父子页面就可经过双方约束的通讯协议进行通讯了。服务器

这里咱们写个demo:socket

var p = document.getElementsByTagName(‘p’)[0];ui

var io = io.connect(‘http://127.0.0.1:3001’);socket.io

io.on(‘data’,function(data){spa

alert(‘2S后改变数据’);

p.innerHTML = data

});

 

服务器端

var io = require(‘socket.io’)(server);

io.on(‘connection’,function(client){

client.emit(‘data’,’hello WebSocket from 3001.’);

});

  今天就说到这里,但愿对你们有所帮助,同时你们若是不想太花时间去作WebSocket这块,能够尝试使用三方WebSocket,相似GoEasy 极光之类的。

这里推荐GoEasy,简单易用 www.goeasy.io 仍是免费的,能够尝试一下。