Socket.io на порту 8888 и веб-сервер на порту 80 - не могут объединить два - PullRequest
Новая
       18

Socket.io на порту 8888 и веб-сервер на порту 80 - не могут объединить два

3 голосов
/ 29 февраля 2012

У меня есть следующий код узла на сервере 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,, график отобразится нормально, но никакие веб-сокеты не будут инициированы. Если я перейду к http://localhost:8888,, график не будет отображаться, но веб-сокет будет работать нормально! Как я могу объединить оба node.js и jQuery?

Большое спасибо заранее,

1 Ответ

3 голосов
/ 05 апреля 2012

Сервер привязывает Socket к определенному порту, а данные, поступающие в систему, перенаправляются на основе адресуемого порта.

Ваш Apache также работает с определенным портом.Он имеет сокет прослушивания, связанный с конкретным портом.По умолчанию это 80.

Когда вы переходите на localhost: 80, ваш браузер создает соединение с Apache, и они обмениваются некоторыми данными и htmls.

Затем, когда вы создаете WebSocket с помощью JS, браузерсоздает сокет и пытается подключиться к указанному адресу и порту.Если ваш сервер веб-сокетов привязан к порту 8888, он будет успешно подключен к нему.

Затем, если вы пытаетесь перейти в браузер top localhost: 8888, что происходит, если браузер создает соединение с вашим сервером, но через порт8888 у вас есть сервер WebSockets, они будут подключаться, но при рукопожатии и других вещах они не будут работать.

Хостинг файлов в Apache - это один порт, а сервер websockets - другой.Проверьте info о том, что такое порты и как они работают.

...