WebSocket解决跨域问题

最新推荐文章于 2024-07-01 11:42:04 发布

Anita-Sun

最新推荐文章于 2024-07-01 11:42:04 发布

阅读量1w

点赞数

分类专栏：跨域

本文链接：https://blog.csdn.net/AnitaSun/article/details/117935718

版权

跨域专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用WebSocket和Socket.IO实现实时的跨域通信。前端通过WebSocket与localhost:8080建立连接并发送消息，后端接收到消息后回发。另外，展示了使用socket.io时，客户端如何连接服务器并处理接收到的消息，以及服务器端如何响应客户端的消息和处理断开连接的情况。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    这种方式本质没有使用HTTP响应头，因此也没有跨域的限制
前端部分：<script>
  let socket = new WebSocket("ws://localhost:8080");
  socket.onopen = function() {
    socket.send("秋风的笔记");
  };
  socket.onmessage = function(e) {
    console.log(e.data);
  };
</script>
 
后端部分：const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 8080 });
server.on("connection", function(socket) {
  socket.on("message", function(data) {
    socket.send(data);
  });
});
 
 
使用socket.io 
客户端处理<script src="./socket.io.js"></script>
<script>
let socket = io('http://www.zhufengpeixun.com/');
// => 连接成功处理
socket.on('connect', function(){
	// => 监听服务端消息
	socket.on('message', function(msg) {
		console.log('data from server' + msg);
	// => 监听服务器关闭
	socket.on('disconnect', function() {
		console.log('server socket has closed');
	});
});
// => 发送消息给服务器端
socket.send("zhufeng");
</script>
 
服务器端处理// => 监听socket连接：server是服务器创建的服务
socket.listen(server).on('connection', function(client) {
	// => 接受信息
	client.on('message', function(msg) {
		client.send(msg + '@@');
	});
	// => 断开处理
	client.on('disconnect', function() {
		console.log('client socket has closed!');
	});
});
 

                