Question

I have a node.js server running on the port 8443. Whenever I try to run the application through the browser my socket.io keeps connecting for about 20 seconds before the url turns red at the end.

Edit 3 : This is my directory structure and now with updated files

/var/www/html/nodetest/

Inside this

/node_modules
/app.js
/index.html

Node JS is installed on server.

Here is my main app.js code (as suggested in answer) :

 var app = require('express')();
 var server = require('http').createServer(app);
 var io = require('socket.io')(server);
 var fs = require('fs');

  // Run server to listen on port 8443.
  server = app.listen(8443, () => {
   console.log('listening on *:8443');
 });

 io.listen(server);

 io.sockets.on('connection', function(socket) {
   socket.emit('message', 'this is the message emitted by server');
  });   

 app.get('/', function(req, res){
   fs.readFile(__dirname + 'index.html', function(error, data) {
      res.writeHead(200);
      res.end(data);         
   });
 });

And this is my client browser side code:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1    
 /socket.io.min.js"></script>
   <script type="text/javascript">
       var websocket;
        function onload() {
        websocket = io.connect();
        websocket.on('message',function(data) {
           console.log('Received a message from the server!',data);
        });

     };
   </script>
 </head>
 <body onload="onload()">
    <div id="divId"></div>
 </body>
 </html>

Here is an image of the error

Now it shows 404 Error

Answer 1

You are doing this in a manner I haven't seen yet. Here is an example that is working. The main difference is my webserver returns the file that I am connecting with the socket.

EDIT: I updated this to use your webserver. I modified it to make it make it server the index.html file.

Webserver:

   var app = require('express')();
   var server = require('http').createServer(app);
   var io = require('socket.io')(server);
   var fs = require('fs');

   // Run server to listen on port 8000.
   server = app.listen(8447, () => {
      console.log('listening on *:8447');
   });

   io.listen(server);

   io.sockets.on('connection', function(socket) {
      socket.emit('message', 'this is the message emitted by server');
   });   

   app.get('/', function(req, res){
      fs.readFile(__dirname + '/index.html', function(error, data) {
         res.writeHead(200);
         res.end(data);         
      });
   });

index.html

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.min.js"></script>
      <script type="text/javascript">
         var websocket;
         function onload() {
            websocket = io.connect();
            websocket.on('connect',function() {
               console.log('Client has connected to the server!');
            });
            websocket.on('message',function(data) {
               console.log('Received a message from the server!',data);
            });
            websocket.on('disconnect',function() {
               console.log('The client has disconnected!');
            });
         };
      </script>
   </head>
   <body onload="onload()">
      <div id="divId"></div>
   </body>
</html>

Answer 2

我已根据您的需要修改了代码。代码正在工作，因为它显示了服务器在浏览器控制台中加载后发出的消息，如下图所示。

Server.js：

let express = require('express')
let app = express();
let http = require('http').Server(app);
let io = require('socket.io')(http);

let port = 8443;
var fs = require('fs');
var path = require('path');

app.get('/', function (req, res) {
    fs.readFile(path.join(__dirname, 'index.html'), function (error, data) {
        res.writeHead(200);
        res.end(data);
    });
});

// Run server to listen on port 8443.
http.listen(port, function () {
    console.log(`listning on ${port}`);
});

io.on('connection', function (socket) {
    socket.emit('message', 'this is the message emitted by server');
    socket.on('disconnect', function () {
        console.log('Client disconnected');
    });
});

的index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.min.js"></script>
    <script type="text/javascript">
        var websocket;
        function onload() {
            websocket = io().connect();
            websocket.on('message', function (data) {
                console.log('Received a message from the server!', data);
            });

        };
    </script>

</head>
<body onload="onload();">

</body>
</html>

输出结果如下：

Answer 3

您正在创建两个单独的服务器，并且只启动其中一个服务器，因此您的socket.io服务器永远不会启动。

改变这个：

  var app = require('express')();
  var server = require('http').createServer(app);
  var io = require('socket.io')(server);

  // Run server to listen on port 8000.
  server = app.listen(8447, () => {
   console.log('listening on *:8447');
  });

到此：

  var app = require('express')();

  // Run server to listen on port 8000.
  var server = app.listen(8447, () => {
   console.log('listening on *:8447');
  });
  var io = require('socket.io')(server);

app.listen()创建自己的服务器，因此您不想同时使用它和http.createServer()。

以下是app.listen()的代码，以便您了解其工作原理：

app.listen = function(){
  var server = http.createServer(this);
  return server.listen.apply(server, arguments);
};

因此，您可以看到使用http.createServer()创建然后绑定到socket.io的服务器从未以.listen()启动。

Answer 4

你犯了一个简单的错误。在您的html文件中将socket.io库文件源https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.min.js更改为socket {0}} {/ 1}}。

之后运行重启你的应用程序。

如果您再次获得https://cdn.socket.io/socket.io-1.4.5.js，那么在您的html中将404替换为websocket = io.connect();

Socket.io js not connecting

4 个答案: