• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    详解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 还是免费的,可以尝试一下。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    上一篇:canvas实现二维码和图片合成的示例代码
    下一篇:移动端Html5页面生成图片解决方案
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    详解WebSocket跨域问题解决 详解,WebSocket,跨域,问题,