教程集 www.jiaochengji.com
教程集 >  前端编程  >  HTML5教程  >  正文 详解WebSocket跨域问题解决

详解WebSocket跨域问题解决

发布时间:2020-05-16   编辑:jiaochengji.com
教程集为您提供详解WebSocket跨域问题解决等资源,欢迎您收藏本站,我们将为您提供最新的详解WebSocket跨域问题解决资源
这篇文章主要介绍了详解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 极光之类的。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程!

相关推荐:

php公益培训视频教程

HTML5图文教程

HTML5在线手册

以上就是详解WebSocket跨域问题解决的详细内容,更多请关注教程集其它相关文章!

  • 本文转载于:脚本之家,如有侵犯,请联系jquerycn@qq.com删除
  • 您可能感兴趣的文章:
    详解WebSocket跨域问题解决
    WebSocket的使用详解
    spring WebSocket的详细介绍
    什么是 WebSocket?深入理解html5中WebSocket
    Websocket原理的深入理解
    什么是Websocket?解析h5中的Websocket
    jQuery 跨域访问问题解决方法
    WebSocket MSE——HTML5 直播技术解析
    PHP跨域问题解决方案
    用jQuery与JSONP轻松解决跨域访问的问题

    [关闭]
    ~ ~