Nodejs关于socket.io客户端一个问题解答

Nodejs关于socket.io客户端一个问题解答

很多人在正确安装了socket.io(评判正确与否是能否运行socket.io官网上的app.js例子)之后发现在服务器端能正确运行，但是在客户端总是不能正确运行(什么都不显示并且服务器端没有类似’成功连接’的提示)，在此我只是说说我自己的理解。 我的客户端和服务端的代码如下(均复制socket.io官网的例子，稍有改动，无妨碍)：

app.js

var app = require('http').createServer(handler)
   ,io = require('socket.io').listen(app)

,fs = require(‘fs’)
app.listen(80);
function handler (req, res) {
}
io.sockets.on(‘connection’, function (socket) {
socket.emit(‘news’, { hello: ‘world’ });
socket.on(‘my other event’, function (data) {
console.log(data);
});
});

index.html

<!DOCTYPE html>
<html>
<head>
  <title>socket.io</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
 <body>
  <h1>socket.io</h1>
  <p>Welcome to socket.io</p>
  <strong><!-- 最关键点 --></strong>
  <script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    //console.log(data);
 alert("aaaaaaaa");
    socket.emit('my other event', { my: 'data' });
  });
</script>
 </body>
</html>

如果你能正确运行‘#node app.js’，能保证你是肯定安装成功了socket.io;

问题在于你怎么打开客户端的index.html:

a).如果你先启动服务器端(执行node app.js)，然后直接双击打开index.html?你是这么打开index.html的？那么你就错了，因为当你在点击打开本地文件index.html时，执行解析此文件的是本地的浏览器，即使你电脑装了node.js，node.js也对它不闻不问，所以，这种情况下浏览器会解析

<script src="/socket.io/socket.io.js"></script>

结果就是在本地的目录下查找/socket.io/目录下的socket.io.js文件(我的错误显示为无法找到D:\\socket.io\socket.io.js'文件)，这当然是找不到了。

b).如果你是通过浏览器地址栏敲入http:\\localhost，则这么一来会如你所愿的成功执行了，但是如果你在用a)中的方法再打开还是错误。 其实错误点就在

<script src="/socket.io/socket.io.js"></script>

这么一来是查找本地的静态目录，node.js不会管的，要把它改成服务器解析的形式，即

<script src="http://localhost/socket.io/socket.io.js"></script>

这么一来的话不管用哪种方法打开应该都没问题了。

这些都是我的经历，因为这几天才开始学习web方面的知识，用恰好碰到这node.js的socket.io，各种原理概念不懂，所以犯的错也是低级的，不过每个人不都是从’hello world’开始学期的么。


5 回复

Nodejs关于socket.io客户端一个问题解答

问题背景

很多人在正确安装了socket.io（评判正确与否是能否运行socket.io官网上的app.js例子）之后发现在服务器端能正确运行，但是在客户端总是不能正确运行（什么都不显示并且服务器端没有类似‘成功连接’的提示）。在此我将分享一些个人的理解。

示例代码

服务端代码 (app.js)
var app = require('http').createServer(handler)
   , io = require('socket.io').listen(app)
   , fs = require('fs'); 

app.listen(80);

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) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function(data) {
    console.log(data);
  });
});
客户端代码 (index.html)
<!DOCTYPE html>
<html>
<head>
  <title>socket.io</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
  <h1>socket.io</h1>
  <p>Welcome to socket.io</p>
  
  <!-- 最关键点 -->
  <script src="http://localhost/socket.io/socket.io.js"></script>
  <script>
    var socket = io.connect('http://localhost');
    socket.on('news', function (data) {
      console.log(data);
      alert("aaaaaaaa");
      socket.emit('my other event', { my: 'data' });
    });
  </script>
</body>
</html>

问题分析

如果你能正确运行node app.js，但客户端的index.html无法正常工作，可能是因为以下原因：

  1. 直接双击打开 index.html:

    • 如果你直接双击打开index.html文件，浏览器会尝试从本地文件系统加载资源，而不会通过HTTP请求获取资源。因此，<script src="/socket.io/socket.io.js"></script> 这行代码会在本地文件系统中查找路径，导致找不到资源。

  2. 通过浏览器地址栏访问 http://localhost:

    • 正确的做法是通过浏览器地址栏访问http://localhost，这样浏览器会通过HTTP请求获取资源。此时，<script src="http://localhost/socket.io/socket.io.js"></script> 这行代码能够正确地从服务器获取socket.io.js文件。

解决方案

为了确保客户端能够正确加载资源，你需要修改index.html中的<script>标签，使其指向正确的URL：

<script src="http://localhost/socket.io/socket.io.js"></script>

总结

以上就是我对这个问题的一些理解和解决方法。希望对你有所帮助！


<li>修正一下，那个服务端的连接返回网页的代码被我删了=。=，所以开启服务器后再在浏览器中输入地址无返回任何东西。。。。 </li>

……，html页面不是直接双击打开的，你创建的是服务器，当然需要用http协议打开了，而不是本地file协议

感谢楼主文章，今天初次使用socket.io就遇到这个问题，还好找到楼主文章，

根据你的描述，主要问题是客户端的 index.html 文件在尝试加载 socket.io.js 文件时失败了。这是因为直接双击打开 index.html 文件时，浏览器试图在本地文件系统中查找 socket.io.js 文件，而不是通过 HTTP 请求从服务器获取。

解决方案

为了确保客户端能够正确加载 socket.io.js 文件，你需要将 index.html 文件放置在一个可以通过 HTTP 访问的目录中，并确保客户端请求通过 HTTP 发出。以下是解决这个问题的具体步骤：

服务端代码 (app.js)

var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');

app.listen(3000); // 监听3000端口

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) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function(data) {
    console.log(data);
  });
});

客户端代码 (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>socket.io</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
  <h1>socket.io</h1>
  <p>Welcome to socket.io</p>
  <script src="http://localhost:3000/socket.io/socket.io.js"></script>
  <script>
    var socket = io.connect('http://localhost:3000');
    socket.on('news', function (data) {
      alert("aaaaaaaa");
      socket.emit('my other event', { my: 'data' });
    });
  </script>
</body>
</html>

说明

  1. 服务端 (app.js) 代码监听 3000 端口，并且当客户端请求 index.html 文件时，服务端会读取并返回 index.html 文件。
  2. 客户端 (index.html) 中 <script> 标签的 src 属性需要指向服务端的 URL (http://localhost:3000/socket.io/socket.io.js)。
  3. 客户端 (index.html) 中 io.connect 方法也需要指向服务端的 URL (http://localhost:3000)。

这样，客户端就能够正确地通过 HTTP 请求加载 socket.io.js 文件，并且与服务端建立 WebSocket 连接。

回到顶部