Nodejs socket.io官网代码参照后，浏览器报错，望指教~

Nodejs socket.io官网代码参照后，浏览器报错，望指教~

这是我参照官网上写的例子 Using with Node http server ，可是node app.js之后，用浏览器 打开http://localhost:3333，发现控制台报错。报错如下图：

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

app.listen(3333);

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

//index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
<script src="/js/socket.io.js"></script>
<script>
    var socket = io('http://localhost:3333');
    socket.on('news', function (data) {
        console.log(data);
        socket.emit('my other event', { my: 'data' });
    });
</script>

QQ截图20140918220155.png


4 回复

根据你提供的信息，你的代码看起来基本正确，但可能存在一些细节上的问题导致浏览器报错。以下是一些可能的原因和修正建议：

1. 确保 socket.io 客户端库被正确加载

确保你的 HTML 文件中引用的 socket.io.js 路径是正确的，并且文件确实存在于服务器上。

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

2. 确保服务器正确响应 HTTP 请求

确保服务器能够正确地响应 HTTP 请求并返回 index.html 文件。检查路径是否正确，并且文件存在。

3. 确保 socket.io 版本兼容性

确保你使用的 socket.io 和 socket.io-client 版本兼容。你可以通过以下命令安装特定版本：

npm install socket.io@latest socket.io-client@latest

4. 检查控制台错误信息

仔细查看浏览器控制台中的错误信息，它通常会提供有关问题的详细信息。

示例代码

以下是经过调整后的代码示例：

app.js

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

// 创建 HTTP 服务器
const app = http.createServer((req, res) => {
    const filePath = path.join(__dirname, 'index.html');
    fs.readFile(filePath, (err, data) => {
        if (err) {
            res.writeHead(500);
            res.end('Error loading index.html');
            return;
        }
        res.writeHead(200);
        res.end(data);
    });
});

// 启动 HTTP 服务器
app.listen(3333, () => {
    console.log('Server is running on port 3333');
});

// 创建 Socket.IO 实例
const io = socketIo(app);

// 监听连接事件
io.on('connection', (socket) => {
    console.log('A user connected');
    
    // 发送消息给客户端
    socket.emit('news', { hello: 'world' });

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

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io('http://localhost:3333');
    socket.on('news', function (data) {
        console.log(data);
        socket.emit('my other event', { my: 'data' });
    });
</script>
</body>
</html>

关键点解释

  1. 路径问题：确保 index.html 文件路径正确。
  2. HTTP 服务器：使用 http.createServer 创建 HTTP 服务器。
  3. Socket.IO 实例：使用 socketIo(app) 创建 Socket.IO 实例。
  4. 监听连接：使用 io.on('connection', ...) 监听连接事件。

希望这些修改能帮助你解决问题！如果还有其他错误信息或具体问题，请提供更多详细信息。


你得到的 socket.io.js文件不对。估计是个出错html文件。

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

根据你提供的代码，问题可能出在几个地方。首先，确保 socket.io 的客户端文件路径正确，并且服务器端和客户端之间的版本兼容性。

以下是改进后的代码示例：

服务器端 (app.js)

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

server.listen(3333, () => {
    console.log('Server is running on port 3333');
});

// 静态文件服务
app.use(express.static(path.join(__dirname)));

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

客户端 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io('http://localhost:3333');
        socket.on('news', function (data) {
            console.log(data);
            socket.emit('my other event', { my: 'data' });
        });
    </script>
</body>
</html>

解释

  1. 静态文件服务：使用 express.static 来提供静态文件服务，这样可以避免手动读取和发送文件。
  2. 依赖安装：确保你已经安装了 socket.io 和 express。你可以通过以下命令安装它们：
    npm install express socket.io
  3. 路径问题：确保 socket.io.js 文件在正确的位置被加载。/socket.io/socket.io.js 是默认路径。

如果仍然遇到问题，请检查浏览器控制台的具体错误信息，以进一步诊断问题。

回到顶部