对两个不同的页面使用相同的端口

时间:2017-04-12 14:05:30

标签: javascript networking socket.io real-time

我有一个在端口3000上运行的server.js和在端口8000上运行的adminserv.js,我想让它们同时在同一个端口号上运行。我通过index.html页面的套接字将数据输入到数据库中,并且能够从数据库中获取数据并将其显示在admin.html上,所以我想让它们同时在相同的端口号上运行。 这是我的 server.js

var app       =     require("express")();
var mysql     =     require("mysql");
var http      =     require('http').Server(app);
var io        =     require("socket.io")(http);

/* Creating POOL MySQL connection.*/

var pool    =    mysql.createPool({
      connectionLimit   :   100,
      host              :   'localhost',
      user              :   'root',
      password          :   '',
      database          :   'fbstatus',
      debug             :   false
});

app.get("/",function(req,res){
    res.sendFile(__dirname + '/index.html');
});

/*  This is auto initiated event when Client connects to Your Machien.  */

io.on('connection',function(socket){  
    console.log("A user is connected");
    socket.on('status added',function(status){
      add_status(status,function(res){
        if(res){
            io.emit('refresh feed',status);
        } else {
            io.emit('error');
        }
      });
    });
});

var add_status = function (status,callback) {
    pool.getConnection(function(err,connection){
        if (err) {
          callback(false);
          return;
        }
    connection.query("INSERT INTO `fbstatus` (`s_text`) VALUES ('"+status+"')",function(err,rows){
            connection.release();
            if(!err) {
              callback(true);
            }
        });
     connection.on('error', function(err) {
              callback(false);
              return;
        });
    });
}

http.listen(3000,function(){
    console.log("Listening on 3000");
});

的index.html

<html>
  <head>
    <title>Socket.io</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
          var socket = io("http://localhost:3000");
          $("#add_status").click(function(){
            socket.emit('status added',$("#comment").val());
          });
          socket.on('refresh feed',function(msg){
            $("#show_comments").append(msg + '<br /><br />');
          });
    });
    </script>
  </head>
  <body>
    <div id="comment_box" style = "padding:5%;">
      <textarea id="comment" rows="5" cols="70"></textarea><br /><br />
      <input type="button" id="add_status" value="Add Status">
    </div>
      <div
       id    = "show_comments"
       class = "jumbotron"
       style = "width: 38%;
                height: 100%;
                padding: 2%;
                margin-left:5%;
                margin-top:-53px;"
     >
      </div>
  </body>
</html>

adminserv.js

var app = require('http').createServer(handler),
    url = require("url"),
    io = require('socket.io').listen(app),
    fs = require('fs'),
    mysql = require('mysql'),
    connectionsArray = [],
    connection = mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: '',
        database: 'fbstatus'
    }),
    POLLING_INTERVAL = 100,
    pollingTimer;
    connection.connect(function(err) {
        console.log(err);
    }); 
    app.listen(8000); 

    function handler(req, res) {
        var url_parts = url.parse(req.url, true);
        var query = url_parts.query;

        fs.readFile('admin.html',
         function(err, data) {
            if (err) {
                console.log(err);
                res.writeHead(500);
                return res.end('Error loading admin.html');
            }
            res.writeHead(200);
            res.end(data);
        });
    }
    var pollingLoop = function() { 
        var query = connection.query('SELECT * FROM fbstatus'),
        fbstatus = []; 
        query.on('error',
        function(err) { 
            console.log(err);
            updateSockets(err);
        }).on('result',
        function(user) { 
            fbstatus.push(user);
        }).on('end',
        function() {
            if (connectionsArray.length) {
                pollingTimer = setTimeout(pollingLoop, POLLING_INTERVAL);
                updateSockets({
                    fbstatus: fbstatus
                });
            }
        });
    }; 
    io.sockets.on('connection',
    function(socket) {
        console.log('Number of connections:' + connectionsArray.length); 
        if (!connectionsArray.length) {
            pollingLoop();
        }
        socket.on('disconnect',
        function() {
            var socketIndex = connectionsArray.indexOf(socket);
            console.log('socket = ' + socketIndex + ' disconnected');
            if (socketIndex >= 0) {
                connectionsArray.splice(socketIndex, 1);
            }
        });
        console.log('A new socket is connected!');
        connectionsArray.push(socket);
    });
    var updateSockets = function(data) { 
        data.time = new Date(); 
        connectionsArray.forEach(function(tmpSocket) {
            tmpSocket.volatile.emit('notification', data);
        });
    };

admin.html

<html>
<head>
<script src="socket.io/socket.io.js"></script> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript">
var socket = io.connect('http://localhost:8000'); 
socket.on('notification',
function(data) {
    var usersList = "<div>";
    $.each(data.fbstatus,
    function(index, fbstatus) {
        usersList += "<div><p><span style='width:100px;float:left;text-align:center'>ID :</span>" + fbstatus.status_id + "</p></div>" + "<div><p><span style='width:100px;float:left;text-align:center'>Message :</span>" + fbstatus.s_text + "</p></div>" + "<div><p><span style='width:100px;float:left;text-align:center'>TimeStamp :</span>" + fbstatus.t_status + "</p></div>";
    });
    usersList += "</div>";
    $('#container').html(usersList);
});
</script>
</head>
<body>
<div id="container">Loading ...</div>   
</body>
</html>

1 个答案:

答案 0 :(得分:2)

您无法在同一台计算机上的同一端口上侦听2个应用。

但你可以试试这个:

您的server.js中的

会收听app.get('/admin',(req,res)=>{});之类的其他网址,并在此处为您的admin.html提供服务。