【9大跨域解决方案】websocket解决跨域的原理

最新推荐文章于 2024-06-05 00:40:27 发布

2024路在何方

最新推荐文章于 2024-06-05 00:40:27 发布

阅读量3.5w

点赞数 8

分类专栏：前端跨域文章标签： websocket socket socket.io 跨域 websocket跨域

版权归作者所有，如需转载，请联系作者

本文链接：https://blog.csdn.net/qq_17175013/article/details/89115804

版权

前端同时被 2 个专栏收录

68 篇文章 4 订阅

订阅专栏

跨域

8 篇文章 0 订阅

订阅专栏

websocket笔记

webSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信。

websocket如何实现跨域通信?

原理：利用webSocket的API，可以直接new一个socket实例，然后通过open方法内send要传输到后台的值，也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:3000})实例，利用message接收数据，利用send向客户端发送数据。具体看以下代码：
代码：
本地域打开socket.html
WebSocket是高级api，不兼容，但是可以使用socket.io这个库，这个库做了兼容处理

 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
 </head>
 <body>
  <!-- 
   高级api  不兼容  但是有一个socket.io这个库，是兼容的(一般用这个)

   -->

   <script type="text/javascript">
    let socket = new WebSocket("ws://localhost:3000");//ws协议是webSocket自己创造的
    socket.onopen = function(){
     socket.send("我叫俞华");
    }
    socket.onmessage = function(e){
     console.log(e.data);//你好,我叫俞华！
    }
   </script>
 </body>
 </html>

起一个服务端
一般起的服务是http服务，但是websocket需要起ws服务，ws是webSocket自己定义的。

 /*
  要使用ws协议，那么就要装一个ws的包
 */
 let express = require("express");
 let app = express();
 let WebSocket = require("ws");
 let wss = new WebSocket.Server({port:3000});
 wss.on("connection",function(ws){//先连接
  ws.on("message",function(data){//用message来监听客户端发来的消息
   console.log(data);//俞华
   ws.send("你好,"+data+"！");
  })
 })

如何保证websocket的通信会话是唯一的？

建立WebSocket链接的url上加上时间戳。

实现跨域的9种方法(点击可跳转详情页面)

jsonp
cors
postMessage
document.domain
window.name
location.hash
http-proxy 后续会有详细文章阐述
nginx 后续会有详细版块阐述
websocket

2024路在何方

关注

8
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
【9大跨域解决方案】websocket解决跨域的原理

websocket笔记webSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信。websocket如何实现跨域通信?原理：利用webSocket的API，可以直接new一个socket实例，然后通过open方法内send要传输到后台的值，也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:...
复制链接

扫一扫

专栏目录