Samgao0312 / Blog

MIT License
1 stars 1 forks source link

【再学前端】使用 WebSocket 协议跨域 #119

Open Samgao0312 opened 2 years ago

Samgao0312 commented 2 years ago

webSocket本身不存在跨域问题,因此可以利用 webSocket 来进行非同源之间的通信。

websocket如何实现跨域通信?

先看下面这个实例:

demo.html 文件:

 <!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+"!");
  })
 })