V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
jonychen1
V2EX  ›  问与答

WebSocket 跨域问题解决

  •  
  •   jonychen1 · 2018-07-30 11:12:15 +08:00 · 1430 次点击
    这是一个创建于 2308 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2406 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 02:11 · PVG 10:11 · LAX 18:11 · JFK 21:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.