2017-04-06 85 views
0

我正在尝试构建一个基本的聊天html程序。 我设置了一个节点服务器来测试它,但是,当访问html页面时,我得到一个套接字错误。这是我第一次使用node.js和设置节点服务器,所以我肯定做错了。Socket.io错误 - ERR_CONNECTION_TIMED_OUT

感谢大家看看这个!

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

 
var socket = io.listen(1223, "1.2.3.4"); 
 
server.listen(process.env.PORT || 3000); 
 

 
console.log('Server is running...'); 
 
var people = {}; 
 

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

 
// When connecting 
 
socket.on("connection", function(client) { 
 
\t client.on("join", function(name){ 
 
\t \t people[client.id] = name; 
 
\t \t client.emit("update", "You have connected to the server."); 
 
\t \t socket.sockets.emit("update", name + " has joined the server."); 
 
\t \t socket.sockets.emit("update-people", people); 
 
\t }); 
 

 
// When sending 
 
\t client.on("send", function(msg){ 
 
\t \t socket.sockets.emit("chat", people[client.id], msg); 
 
\t }); 
 

 
// When disconnecting 
 
\t client.on("disconnect", function(){ 
 
\t \t socket.sockets.emit("update", people[client.id] + " has left the server."); 
 
\t \t delete people[client.id]; 
 
\t \t socket.sockets.emit("update-people", people); 
 
\t }); 
 
});
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <!-- Latest compiled and minified CSS --> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="/socket.io/socket.io.js"></script> 
 
</head> 
 
    <script> 
 
    
 
     $(document).ready(function(){ 
 
     var socket = io.connect("1.2.3.4:1223"); 
 
     $("#chat").hide(); 
 
     $("#name").focus(); 
 
     $("form").submit(function(event){ 
 
      event.preventDefault(); 
 
     }); 
 
     
 
     $("#join").click(function(){ 
 
      var name = $("#name").val(); 
 
      if (name != "") { 
 
       socket.emit("join", name); 
 
       $("#login").detach(); 
 
       $("#chat").show(); 
 
       $("#msg").focus(); 
 
       ready = true; 
 
      } 
 
     }); 
 

 
     $("#name").keypress(function(e){ 
 
      if(e.which == 13) { 
 
       var name = $("#name").val(); 
 
       if (name != "") { 
 
        socket.emit("join", name); 
 
        ready = true; 
 
        $("#login").detach(); 
 
        $("#chat").show(); 
 
        $("#msg").focus(); 
 
       } 
 
      } 
 
     }); 
 

 
     socket.on("update", function(msg) { 
 
      if(ready) 
 
       $("#msgs").append("" + msg + ""); 
 
     }) 
 

 
     socket.on("update-people", function(people){ 
 
      if(ready) { 
 
       $("#people").empty(); 
 
       $.each(people, function(clientid, name) { 
 
        $('#people').append("" + name + ""); 
 
       }); 
 
      } 
 
     }); 
 

 
     socket.on("chat", function(who, msg){ 
 
      if(ready) { 
 
       $("#msgs").append("" + who + " says: " + msg + ""); 
 
      } 
 
     }); 
 

 
     socket.on("disconnect", function(){ 
 
      $("#msgs").append("The server is not available"); 
 
      $("#msg").attr("disabled", "disabled"); 
 
      $("#send").attr("disabled", "disabled"); 
 
     }); 
 

 
// Sending the message (either by button click or enter) 
 
     $("#send").click(function(){ 
 
      var msg = $("#msg").val(); 
 
      socket.emit("send", msg); 
 
      $("#msg").val(""); 
 
     }); 
 

 
     $("msg").keypress(function(e){ 
 
      if (e.which == 13) { 
 
      var msg = $("msg").val(); 
 
      socket.emit("send", msg); 
 
      $("#msg").val(""); 
 
      } 
 
     }); 
 

 
     }); 
 

 
    </script> 
 

 
<body> 
 
    <div class="container"> 
 

 
<div class="row"> 
 
     <div class="span2"> 
 
      <ul id="people" class="unstyled"></ul> 
 
     </div> 
 
     <div class="span4"> 
 
      <ul id="msgs" class="unstyled"> 
 
     </div> 
 
     </div> 
 

 
     <div class="row"> 
 
     <div class="span5 offset2" id="login"> 
 
      <form class="form-inline"> 
 
      <input type="text" class="input-small" placeholder="Your name" id="name"> 
 
      <input type="button" name="join" id="join" value="Join" class="btn btn-primary"> 
 
      </form> 
 
     </div> 
 
     <div class="span5 offset2" id="chat"> 
 
      <form id="2" class="form-inline"> 
 
      <input type="text" class="input" placeholder="Your message" id="msg"> 
 
      <input type="button" name="send" id="send" value="Send" class="btn btn-success"> 
 
      </form> 
 
     </div> 
 
     </div> 
 

 
     </div> 
 

 
    </body> 
 
</html>

+0

你能发布确切的错误信息,你越来越好? – Himal

+0

在控制台中:GET http://1.2.3.4:1234/socket.io/socket.io.js localhost /:5 net :: ERR_CONNECTION_TIMED_OUT – JonasSH

回答

0

你混淆了不同listen电话。

var server = require('http').createServer(app); 
var io = require("socket.io").listen(server); 
var socket = io.listen(1223, "1.2.3.4"); 
server.listen(process.env.PORT || 3000); 

第三行没有您所期望的效果。 io不会自行侦听。它使用在端口监听HTTP服务器3000

而是使用此服务器

var server = require('http').createServer(app); 
var socket = require("socket.io").listen(server); 
server.listen(process.env.PORT || 3000); 

上,并在客户端连接到端口3000(或通过PORT环境变量配置的端口。

​​

如果你想要听的专用端口socket.io上,你必须创建第二个HTTP服务器监听第二个端口,并绑定一个到socket.io。

+0

现在看起来像这样,不起作用:var express = require( '表现'); var app = express(); var server = require('http')。createServer(app); var socket = io.connect(“your.domain:3000”); var io = require(“socket.io”)。listen(server); server.listen(process.env.PORT || 3000); console.log('Server is running ...'); var people = {}; app.get( '/',函数(REQ,RES){ \t res.sendFile(__目录名称+ '/index.html');} ) – JonasSH

+0

当然,这是不行的!这个代码'var socket = io.connect(“your.domain:3000”);'用于客户端!当然,你必须用你的域名或IP地址替换'your.domain'。 –

+0

对不起,但node.js和设置服务器对我来说是全新的。这基本上是我第一次尝试做这个 – JonasSH