在html中怎么解决WebSocket跨域问题?如何解决WebSocket跨域问题的详细解析!

2021-07-14 16:54:52 浏览数 (48)

在前端开发中我们会遇到很多不同的兼容性问题等等,那么今天我们就来说说有关于:“在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.’);

});

今天就说到这里,希望对大家有所帮助,同时大家如果不想太花时间去做 WebSocket这块,可以尝试使用三方 WebSocket,类似GoEasy 极光之类的。

这里推荐GoEasy,简单易用 www.goeasy.io 还是免费的,可以尝试一下。

对于:“在html中怎么解决WebSocket跨域问题?”这个问题的相关内容和资料就分享到这边了,对 html 有感兴趣的小伙伴们都可以在W3Cschool中进行学习和了解。 


1 人点赞