【问题标题】:Socket.io client not connecting with serverSocket.io 客户端未与服务器连接
【发布时间】:2011-08-03 21:04:16
【问题描述】:

几周前我开始阅读有关 node.js 的信息,并决定进一步了解它。我在我的 Linux 服务器(Turnkey Linux,基本上是 Ubuntu)上安装了 node 和 socket.io 以及其他一些软件包(express 和一些我不记得了)。我找到了一些教程并浏览了它们,但无法让任何客户端将消息发送回服务器。以下是我学习过的一些教程(我还有更多,但网站不允许我发布更多链接):

简单的聊天室 http://vivahate.com/2011/03/25/a-simple-chat-room-in-node-js/

简单的 Socket.io 实时聊天 http://webdevrefinery.com/forums/topic/7991-simple-socketio-real-time-chat/

请注意,webdevrefinery 有一个在线演示,它可以在我的浏览器中从两台不同的计算机上运行。有一个我下载并运行的代码链接,服务器运行得很好。我转到 url(我的 LAN 上的 192.168.0.30:3000),它显示正确的 HTML,并且只要我浏览到该 URL,控制台就会输出“调试 - 提供静态 /socket.io.js”。当我输入信息并“输入”时,什么也没有发生。我将警报放入代码中,它似乎在“sendMsg()”中的“socket.send”行上失败了。这是我正在使用的代码:

server.js:

    var http = require('http'),
    sys = require('sys'),
    fs = require('fs'),
    io = require('socket.io');

var server = http.createServer(function(req, res) {
    fs.readFile('chat.html', 'binary', function(err, data) {
        if( err ) {
            res.writeHead(500, {'Content-type': 'text/html'});
            res.write(data + "\n");
            res.end();
            return;
        }

        res.writeHead(200, {'Content-type': 'text/html'});
        res.write(data, 'binary');
        res.end();
    });
});
server.listen(3000);

var socket = io.listen(server);
socket.on('connection', function( client ) {
    client.on('message', function(data) {
        console.log("Message: " + JSON.stringify(data));
        socket.broadcast(data);
    });
    client.on('disconnect', function() {
    });
});

client.html

<html>
<head>
<style type="text/css">
#msgs {
    height: 50%;
    overflow-y: scroll;
}

div.odd {
    background-color: gray;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://192.168.0.30:3000/socket.io/socket.io.js"></script>
<title>Realtime Chat Test</title>
</head>
<body>
<div id="container">
<div id="msgs"></div>
<div id="form">
<form id="chat" action="javascript:sendMsg()">
Username:<input type="text" name="username" /><br />

Message:<input id="msg" type="text" name="message" /><br />
<input type="submit" />
</form>
</div>
</div>
</body>
<script type="text/javascript">
var socket = new io.Socket("192.168.0.30", {port:3000});
socket.connect();

var classes = new Array('even', 'odd');
var numMsgs = 0;

function reconnect() {
    if( socket.connecting ) {
        setTimeout('reconnect()',1000);
    }
    else if( !socket.connected ) {
        socket.connect();
        setTimeout('reconnect()',1000);
    }
}

socket.on('disconnect', function() {
    reconnect();
});

socket.on('message', function(data) {
    var ms = JSON.parse(data);
    if( ms.username !== undefined && ms.message !== undefined ) {
        numMsgs++;
        $('#msgs').append( function() {
            var d = $('<div class="'+classes[numMsgs%2]+'"/>');
            d.text(ms.username + ' says: ' + ms.message);
            return d;
        });
        var objDiv = document.getElementById('msgs');
        objDiv.scrollTop = objDiv.scrollHeight;
    }
}); 

function sendMsg() {
    var values = {};
    $.each($('#chat').serializeArray(), function(i,v) {
        values[v.name] = v.value;
    });
    document.getElementById("msg").value = "";
    socket.send(JSON.stringify(values));
}
</script>
</html>

我使用的 Linux 发行版没有 X 或类似的东西,因为我从 Windows 机器上进行所有浏览,这就是为什么我不从 localhost 进行测试的原因,尽管我假设这应该可以从其他主机,如我浏览页面时提供的 HTML 和输出的消息所证明的那样。关于为什么我从来没有从客户端收到任何消息到服务器的任何想法?我假设我在每个教程中都犯了同样的错误,因为我尝试过大约 8 个其他教程,但我总是遇到同样的问题。谢谢。

达里尔

【问题讨论】:

    标签: node.js socket.io


    【解决方案1】:

    这是对阿尔弗雷德回答后的cmets的回应。我不知道如何在该行中添加另一个评论,所以我发布了一个“答案”。

    @Alfred - 感谢您提供的示例,但正如丹尼尔所说,考虑到我还没有收到简单的信息,这似乎还有很多工作要做。 @Daniel - 就文档而言,我仍然不知道如何实际使用 socket.io 主页上的示例。有一个“如何使用”链接什么都不做,一个 Wiki 链接不解释任何关于示例的内容。我知道如何启动服务器,但仍然不知道如何将客户端连接到服务器,甚至不知道如何“启动”客户端。大多数教程都有某种从服务器指向客户端页面的“链接代码”,然后您只需将浏览器指向“http://yoursiteaddress:port”,页面就会显示出来。 socket.io 主页上的代码在客户端和服务器代码之间没有这样的“连接”。你应该浏览“客户端”代码吗?我试过了,无论我去什么 URL,它都提供完全相同的代码,假设我要去“http://yoursiteaddress:port”,这是有道理的,但我还没有看到任何实际解释如何使用它的文档代码。因此,我要去的教程显然都使用旧代码。是否有一些我遗漏的文档?

    【讨论】:

      【解决方案2】:

      我敢打赌,问题在于您的依赖关系。例如,让我们看看我的依赖项:

      $ npm ls
      
      ├─┬ express@2.4.3 
      │ ├─┬ connect@1.6.0 
      │ │ └── qs@0.3.0 
      │ ├── mime@1.2.2 
      │ └── qs@0.3.0 
      ├─┬ socket.io@0.7.7 
      │ ├── bison@1.1.1  extraneous
      │ ├── policyfile@0.0.3 
      │ ├── redis@0.6.0 
      │ └─┬ socket.io-client@0.7.4 
      │   └── uglify-js@1.0.3
      

      从 socket.io 0.6.x 到 0.7.x,API 经历了一些重大变化。看起来您正在阅读使用 socket.io 0.6.x 的旧教程,并且您已经安装了 0.7.x。我建议你阅读migration instructions

      我想为您提供真正简单的演示(利用您已安装的 express),希望它可以工作。

      var app = require('express').createServer(),
          sio = require('socket.io');
      
      app.get('/', function(req, res){
        res.send('<script src="/socket.io/socket.io.js"></script>\
      <script>\
        var socket = io.connect("http://192.168.0.30");\
        socket.on("news", function (data) {\
          alert(data.hello);\
        });\
      </script>');
      });
      
      app.listen(3000);
      
      var io = sio.listen(app);
      
      io.sockets.on('connection', function (socket) {
        socket.emit('news', { hello: 'world' });
      });
      

      当你连接到 socket.io 服务器时应该提醒world


      我还认为适用于您的示例的方法是安装 socket.io 0.6.18,它是当前最新的 0.6.x,位于文件夹 node_modules 内的目录中。由于node.js module system,Node.js 将在本地包含该模块。如果该目录尚不存在,则可以通过创建该目录来执行此操作,并发出mkdir -p node_modules。接下来安装发出npm install socket.io@0.6.18 的socket.io。那么我认为您应该能够运行那些旧示例。

      【讨论】:

      • 感谢您的信息!似乎我发现的所有教程都是“旧的”,即使它们是上个月制作的。您知道当前实际有效的任何教程吗?我不太愿意回去为过时的代码库获取工作代码。哦,你提供的代码 sn-p 工作,虽然我不太明白它与拥有服务器和客户端而不是服务器的关系。具有 0.6 和 0.7 之间差异的 socket.io 页面有所帮助,但它仍然有一个链接到更多信息的链接,该链接只是链接到没有说明的主页。
      • @Darryl 我有一个客户端和一个服务器!但为简单起见,我将它们全部放在一个文件中!我不知道很多新教程,但这个很有趣,例如 => danielbaulig.de/socket-ioexpress。另外我想指出 github(WIKI) => github.com/learnboost/socket.io/wikisocket.io 的文档非常完整。
      • +1 用于提及我的教程;)@Darryl:你真的应该使用socket.io 的简单示例并从那里开始成长。这是万无一失的方法。采取更复杂的例子并根据您的需要减少它们往往是一条没有成功的道路。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-11-18
      • 2022-06-13
      • 2020-11-20
      • 2015-09-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多