Nodejs socketio 报错（server info - unhandled socket.io url 跟client端 XMLHttpRequest cannot load）

发布于 1周前 作者 phonegap100 来自 nodejs/Nestjs

Nodejs socketio 报错（server info - unhandled socket.io url 跟client端 XMLHttpRequest cannot load）

server端

 var http = require('http');
var io = require('socket.io');
//创建server
var server = http.createServer();
//端口8080
var io = io.listen(server);
server.listen(8089);
io.on("connection", function (client) {
	setInterval(function () {
		client.send(os.freemem() / os.totalmem());
	}, 500);
});

client端

<!doctype html> 
<html> 
  <head> 
	<title> 服务器内存使用情况 </title> 
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
	<style> 
		#usage {border : 1px dashed green;} 
	</style> 
	<script> 
		var canvas, width = 200, height = 200, buffer = [], max = 200; 
		function updateChart(data) { 
			if (buffer.length >= max) { 
				buffer.unshift(); 
			} 
			buffer.push(data); 
			var ctx = canvas.getContext("2d"); 
			ctx.clearRect(0, 0, width, height); 
			for (var i = 1, n = buffer.length; i < n; i++) { 
				ctx.strokeStyle = "red"; 
				ctx.beginPath(); 
				ctx.moveTo(i - 1 , buffer[i - 1] * height); 
				ctx.lineTo(i, buffer[i] * height); 
				ctx.closePath(); 
				ctx.stroke(); 
			} 
		} 
		function onLoad() { 
			canvas = document.getElementById("usage"); 
			var socket = new io.Socket('192.168.1.3', {port: 8089}); 
			socket.connect(); // 连接到服务器
			socket.on("message", function(obj){ // 接收到消息时的处理方法
				updateChart(obj); 
			}); 
		} 
	</script> 
  </head> 
  <body onload="onLoad();"> 
	<h1> 内存使用情况 </h1>   
	<canvas id="usage" width="200" height="200"></canvas> 
  </body> 
 </html>

然后 这两个东西，都放到了我的服务器上，我的服务器地址是192.188.1.3 是php的服务器。

我首先访问了 192.168.1.3:8080/client.html 进入页面端，之后在后台 node 开启了server端。 结果 页面端报错： XMLHttpRequest cannot load http://192.168.1.3:8089/socket.io/xhr-polling//1348727089478. Origin http://192.168.1.3:8080 is not allowed by Access-Control-Allow-Origin. server端报错 info - unhandled socket.io url warn - unknown transport: “undefined” info - unhandled socket.io url warn - unknown transport: "undefined

查了不少资料，发现要改origin 改了也没有用啊。。


5 回复

问题分析

在你的场景中，客户端与服务端之间的Socket.IO连接失败。主要问题在于跨域资源共享（CORS）以及Socket.IO URL处理错误。

解决方案

服务端代码修改

确保你的服务端正确配置了Socket.IO，并且允许跨域请求。以下是修改后的服务端代码：

var http = require('http');
var io = require('socket.io');

// 创建server
var server = http.createServer();

// 端口8089
var ioServer = io.listen(server);

server.listen(8089);

ioServer.on("connection", function (client) {
    setInterval(function () {
        client.send(os.freemem() / os.totalmem());
    }, 500);
});

// 配置CORS
ioServer.origins('*:*'); // 允许所有来源的所有端口

客户端代码修改

确保你的客户端代码正确引用了Socket.IO库，并且URL设置正确。以下是修改后的客户端代码：

<!doctype html>
<html>
<head>
    <title>服务器内存使用情况</title>
    <script src="https://cdn.socket.io/stable/socket.io.min.js"></script>
    <style>
        #usage {border : 1px dashed green;}
    </style>
    <script>
        var canvas, width = 200, height = 200, buffer = [], max = 200;

        function updateChart(data) {
            if (buffer.length >= max) {
                buffer.shift();
            }
            buffer.push(data);
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, width, height);
            for (var i = 1, n = buffer.length; i < n; i++) {
                ctx.strokeStyle = "red";
                ctx.beginPath();
                ctx.moveTo(i - 1, buffer[i - 1] * height);
                ctx.lineTo(i, buffer[i] * height);
                ctx.closePath();
                ctx.stroke();
            }
        }

        function onLoad() {
            canvas = document.getElementById("usage");
            var socket = io('http://192.168.1.3:8089'); // 使用正确的URL
            socket.on("data", function (obj) { // 修改事件名称以匹配服务端发送的数据
                updateChart(obj);
            });
        }
    </script>
</head>
<body onload="onLoad();">
    <h1>内存使用情况</h1>
    <canvas id="usage" width="200" height="200"></canvas>
</body>
</html>

关键点解释

  1. 服务端配置CORS:

    • ioServer.origins('*:*') 允许所有来源的所有端口。这有助于解决跨域问题。

  2. 客户端URL设置:

    • 确保客户端使用正确的URL来连接到服务器。这里使用了 http://192.168.1.3:8089。

  3. 事件名称匹配:

    • 在服务端发送数据时，客户端应该监听与之匹配的事件名称。这里将客户端的事件名称从 "message" 改为 "data"。

通过以上修改，你应该能够解决跨域问题并成功建立Socket.IO连接。


origin 真的已经改了? https://github.com/jiyinyiyong/talkpage/blob/gh-pages/server.coffee#L7

改的socketio配置文件manager.js

  if (origin) {
// https://developer.mozilla.org/En/HTTP_Access_Control
headers['Access-Control-Allow-Origin'] = origin;
headers['Access-Control-Allow-Credentials'] = 'true';

} headers[‘Access-Control-Allow-Origin’] = “*”

不好意思我看不懂coffee啊。。

这个问题通常发生在浏览器中存在跨域请求问题。你可以通过设置 Access-Control-Allow-Origin 来解决这个问题。

修改Server端代码

var http = require('http');
var io = require('socket.io');

var server = http.createServer();
var io = io.listen(server);

// 允许所有来源的请求
io.set('origins', '*:*');

server.listen(8089);

io.on("connection", function (client) {
    setInterval(function () {
        client.send(os.freemem() / os.totalmem());
    }, 500);
});

修改Client端代码

确保你的HTML文件中的Socket.IO脚本引用正确，并且连接逻辑没有错误：

<!DOCTYPE html>
<html>
<head>
    <title>服务器内存使用情况</title>
    <script src="http://cdn.socket.io/stable/socket.io.js"></script>
    <style>
        #usage { border: 1px dashed green; }
    </style>
    <script>
        var canvas, width = 200, height = 200, buffer = [], max = 200;

        function updateChart(data) {
            if (buffer.length >= max) {
                buffer.shift();
            }
            buffer.push(data);
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, width, height);
            for (var i = 1, n = buffer.length; i < n; i++) {
                ctx.strokeStyle = "red";
                ctx.beginPath();
                ctx.moveTo(i - 1, buffer[i - 1] * height);
                ctx.lineTo(i, buffer[i] * height);
                ctx.closePath();
                ctx.stroke();
            }
        }

        function onLoad() {
            canvas = document.getElementById("usage");
            var socket = io.connect('http://192.168.1.3:8089'); // 确保使用正确的端口号
            socket.on("connect", function () {
                console.log("Connected to server");
            });
            socket.on("message", function (data) {
                updateChart(data);
            });
        }
    </script>
</head>
<body onload="onLoad();">
    <h1>内存使用情况</h1>
    <canvas id="usage" width="200" height="200"></canvas>
</body>
</html>

注意事项

  • 确保客户端与服务器在同一网络中，或配置正确的防火墙规则。
  • 检查是否使用了正确的端口号。
  • 使用 io.connect 而不是 new io.Socket 方法，因为后者已被弃用。

这样应该可以解决你的跨域问题。如果仍然存在问题，请检查网络配置或防火墙设置。

回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！