logo标签列表

在端口8888上使用Socket.io和在端口80上使用Web服务器 - 无法将两者合并

javascriptjquerynode.jswebsocketport
3
我有以下的node.js服务器端代码：
var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen(8888);

var fn='/home/eamorr/workspace/node_proxy_remote5/data';

function handler (req, res) {
    fs.readFile(__dirname + '/index.html',
    function (err, data) {
    if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
    }
    res.writeHead(200);
    res.end(data);
    });
}

io.sockets.on('connection', function (socket) {
    fs.watchFile(fn,function(curr,prev){
        //curr.time
        fs.readFile(fn,function(err,data){
            socket.emit('data',data.toString());
            console.log(data);
        });
    });
});

作为您可以看到的，我正在观察一个文件并将修改发送到浏览器。
在客户端，我有：
<html>

<head>
<script src="/socket.io/socket.io.js"></script>

<script type="text/javascript" src="./jqPlot/jquery.min.js"></script>
<script type="text/javascript" src="./jqPlot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="./jqPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="./jqPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="./jqPlot/jquery.jqplot.min.css" />

</head>

<body>
<script type="text/javascript">
var socket = io.connect('http://localhost:8888');
socket.on('data', function (data) {
    console.log(data);
    //socket.emit('my other event', { my: 'data' });
});
</script>
<div id="chart2" style="height:300px; width:500px;"></div>


<script type="text/javascript">
$(document).ready(function(){
    var plot2 = $.jqplot ('chart2', [[3,7,9,1,5,3,8,2,5]], {
        // Give the plot a title.
        title: 'Bandwidth over port 10001',
        // You can specify options for all axes on the plot at once with
        // the axesDefaults object.  Here, we're using a canvas renderer
        // to draw the axis label which allows rotated text.
        axesDefaults: {
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        // Likewise, seriesDefaults specifies default options for all
        // series in a plot.  Options specified in seriesDefaults or
        // axesDefaults can be overridden by individual series or
        // axes options.
        // Here we turn on smoothing for the line.
        seriesDefaults: {
            rendererOptions: {
                smooth: true
            }
        },
        // An axes object holds options for all axes.
        // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
        // Up to 9 y axes are supported.
        axes: {
          // options for each axis are specified in seperate option objects.
          xaxis: {
            label: "X Axis",
            // Turn off "padding".  This will allow data point to lie on the
            // edges of the grid.  Default padding is 1.2 and will keep all
            // points inside the bounds of the grid.
            pad: 0
          },
          yaxis: {
            label: "Y Axis"
          }
        }
    });
});

</script>

</body>

</html>

如您所见，我正在尝试使用从服务器发送的数据使用jqPlot绘制图形。
这段代码的问题在于，如果我导航到http://localhost:80，图形会正常显示，但没有WebSocket被初始化。如果我导航到http://localhost:8888，图形将不会显示，但WebSocket将正常工作！ 我该如何同时使用node.js和jQuery？
提前致谢，
1
我看不到端口80上的监听，只有app.listen(8888);。也许这是一个同源策略问题？ - mindandmedia
当我在8888上进行监听时，在jQuery文件中会出现大量错误。例如“XML表达式中缺少} [中断此错误]”你认为socket.io和jQuery之间存在冲突吗？ - Eamorr
好的，现在它可以工作了...我只需要包含以下内容："<script src="http://localhost:8888/socket.io/socket.io.js"></script>" 而不是 "<script src="/socket.io/socket.io.js"></script>" Woop woop! - Eamorr
做得好！把它标记为正确答案吧 :) - mindandmedia
1个回答
3
服务器将套接字绑定到特定端口，来的数据基于寻址端口重定向到系统。
你的Apache也在特定端口上工作。它有一个绑定到特定端口的监听套接字。默认情况下是80。
当您导航到localhost:80时，您的浏览器会创建与Apache的连接，并交换一些数据和HTML。
然后，当您使用JS创建WebSocket时，浏览器创建套接字并尝试连接到提供的地址和端口。如果您的WebSockets服务器绑定到端口8888，则它将成功连接。
然后，如果您尝试在浏览器中导航到localhost:8888会发生什么，浏览器会创建到您的服务器的连接，但在端口8888上，您有WebSockets服务器，它们将连接但在握手和其他事情上失败。
在Apache中托管文件是一个端口，而WebSocket服务器是另一个端口。 查看一些关于端口以及它们如何工作的 信息。
1
非常有用的答案。谢谢。 - miksiii
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接