html中如何解决WebSocket跨域问题

本文小编为大家详细介绍“html中如何解决WebSocket跨域问题”，内容详细，步骤清晰，细节处理妥当，希望这篇“html中如何解决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.’);

});

读到这里，这篇“html中如何解决WebSocket跨域问题”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。