WebSocket跨域问题解决

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

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

  项目中要保证父子页面通信是点对点,需要在服务端建立对父子页面WebSocket的对应关系,即父页面发的消息只被子页面收到,子页面的消息也只被父页面收到我们做了以下工作,严格保证了

WebSocket通信是点对点:

  一是建立WebSocket链接的URL加上时间戳保证通信会话是唯一的;

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

这里我们写个demo:

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

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

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

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还是免费的,可以尝试一下。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架,建立于...
    Hsinwong阅读 22,604评论 1 92
  • 夜里,凌晨3点钟。房间内很静,卫生间热水器滴答滴答的水声,窗户外面偶尔经过的火车声,马路上连续不断的车流声,还有我...
    小辣娇阅读 363评论 0 6
  • 在这个炎热的夏日里,妈妈决定让我和姑姑,姑父,弟弟一起去离家不远处的水上乐园玩。 这把我和弟弟乐得,开心的不得了...
    张轩荣阅读 265评论 0 0