请教前辈一个关于Nodejs中socket.io的问题

请教前辈一个关于Nodejs中socket.io的问题

我的server: var express = require(‘express’); var app = require(‘express’)(); var server = require(‘http’).Server(app); var io=require(‘socket.io’)(server); io.sockets.on(‘connection’, function (socket) { socket.emit(‘news’, { hello: ‘world’ }); socket.on(‘my other event’, function (data) { console.log(data);
}); }); …其他省略…

client: <html> <head> <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect(‘http://localhost:3000’); socket.on(‘news’, function (data) { console.log(data); socket.emit(‘my other event’, { my: ‘data’ }); }); </script> </head> <body > <div></div> </body> </html>

前辈们帮我看看我的socket.io搭载在express服务器上 这样写对不？ 然后：如果我这样写的话 前端会报两个错第一个:Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/socket.io/socket.io.js 第二个:Uncaught ReferenceError: io is not defined 这里说找不到socket.io/socket.io.js 这个JS，确实。我自己也不知道这个JS文件到底是哪一个，代码是copy过来的。node 新人，还请各位多指点指点


5 回复

当然可以，让我们一步一步来解决这个问题。

1. 检查 socket.io 的安装

首先确保你已经安装了 socket.io 和 express：

npm install express socket.io

2. 修正服务器端代码

你的服务器端代码有一些拼写错误（例如使用了中文引号），需要修改为英文引号。另外，你需要确保 socket.io 的客户端资源可以被正确加载。

下面是修正后的服务器端代码：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
    console.log('A user connected');

    // 向客户端发送消息
    socket.emit('news', { hello: 'world' });

    // 监听客户端的消息
    socket.on('my other event', (data) => {
        console.log(data);
    });
});

server.listen(3000, () => {
    console.log('Server listening on port 3000');
});

3. 修正客户端代码

确保你的 HTML 文件正确引用了 socket.io.js 文件。通常情况下，socket.io.js 会在你的服务器根目录下自动提供。

以下是修正后的客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.IO Example</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('http://localhost:3000');

        socket.on('news', function (data) {
            console.log(data);
            socket.emit('my other event', { my: 'data' });
        });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

4. 解决 404 错误

确保 socket.io.js 文件可以从 /socket.io/socket.io.js 路径访问到。如果你的 Express 应用没有静态文件服务，可以添加以下代码：

app.use(express.static(__dirname + '/public'));

并将你的 HTML 文件放在 public 目录下。

5. 解决 ReferenceError: io is not defined

确保 socket.io.js 文件已正确加载。你可以通过浏览器的开发者工具查看网络请求是否成功加载了该文件。如果还是有问题，尝试清除浏览器缓存或重新启动开发服务器。

希望这些步骤能帮助你解决问题！如果有更多问题，欢迎继续提问。


帖子不能沉，果断继续等

装socket.io模块了么？

node了解过么，静态文件加载了么？还有你用的都是最新的模块，例子上用的都是以前的，版本不一样，要注意调整内容

你的问题主要在于客户端无法加载 socket.io-client 库以及找不到 io 对象。以下是修正后的代码示例：

服务器端代码（server.js）

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

io.on('connection', function(socket) {
    socket.emit('news', { hello: 'world' });
    socket.on('my other event', function(data) {
        console.log(data);
    });
});

server.listen(3000, function() {
    console.log('Server listening on port 3000');
});

客户端代码（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.IO Example</title>
</head>
<body>
    <div id="content"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('http://localhost:3000');
        socket.on('news', function(data) {
            console.log(data);
            document.getElementById('content').innerText = JSON.stringify(data);
            socket.emit('my other event', { my: 'data' });
        });
    </script>
</body>
</html>

解释：

  1. 服务器端代码：

    • 使用 express 和 http 模块创建一个基本的 HTTP 服务器。
    • 使用 socket.io 模块处理 WebSocket 连接。
    • 在连接时发送一条消息，并监听 my other event 事件。

  2. 客户端代码：

    • 确保 <script> 标签引用了正确的 socket.io.js 文件路径。
    • 创建一个 Socket.IO 客户端实例并连接到服务器。
    • 监听 news 事件并打印数据到控制台。
    • 向服务器发送一个事件 my other event 并附带数据 { my: 'data' }。

通过这些修改，你应该可以解决 404 错误和 ReferenceError: io is not defined 错误。确保你的项目结构正确，并且所有依赖项都已安装。

回到顶部