Nodejs求解在Express4.X中使用Socket.Io。

Nodejs求解在Express4.X中使用Socket.Io。

按官方：

  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);

server.listen(80);

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

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
}); \n``` 
结果在客户端（chrome）的Console中报错：
Uncaught SyntaxError: Unexpected token <
不知如何解决，求大神解答

4 回复

当然可以。你遇到的问题是因为在引入 socket.io 客户端库时，HTML 文件中的 <script> 标签被错误地解析了。你需要确保正确地引用了 socket.io 的客户端库。

以下是修正后的代码示例：

服务器端代码

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

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

// 设置静态文件目录
app.use(express.static(__dirname + '/public'));

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

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

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

客户端代码 (public/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.IO Example</title>
</head>
<body>
  <h1>Welcome to the Socket.IO Chat</h1>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();

    socket.on('news', function (data) {
      console.log(data);
      // 显示消息到页面
      var messageDiv = document.createElement('div');
      messageDiv.textContent = JSON.stringify(data);
      document.body.appendChild(messageDiv);
    });

    // 发送消息到服务器
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Enter') {
        var inputField = document.getElementById('messageInput');
        socket.emit('myEvent', { message: inputField.value });
        inputField.value = '';
      }
    });
  </script>
  <input type="text" id="messageInput" placeholder="Type a message...">
</body>
</html>

解释

  1. 服务器端:

    • 使用 express.static 来设置静态文件目录，以便可以访问 public 目录下的文件。
    • 将 HTML 文件放在 public 目录下，并通过 res.sendFile 返回给客户端。
    • 使用 io.on('connection', ...) 监听客户端连接事件，并发送消息到客户端。

  2. 客户端:

    • 引用 socket.io 客户端库时，使用相对路径 /socket.io/socket.io.js。
    • 当客户端连接成功后，监听 news 事件并显示消息。
    • 用户按下回车键时，发送消息到服务器。

这样配置后，应该不会再出现 Uncaught SyntaxError: Unexpected token < 的错误。


语法问题

能具体点吗？求范例

对于你的问题，报错信息 Uncaught SyntaxError: Unexpected token < 通常表示客户端尝试解析HTML而不是JavaScript。这意味着在加载Socket.IO客户端库时出现了问题。

以下是如何在Express 4.x项目中正确配置和使用Socket.IO的步骤：

  1. 安装依赖: 确保你已经安装了express和socket.io包。你可以通过运行以下命令来安装它们：

    npm install express socket.io

  2. 服务器端代码: 你需要创建一个HTTP服务器并将其传递给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);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', (data) => {
    console.log(data);
  });
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

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

  3. 客户端代码: 在客户端，确保你正确地引用了Socket.IO客户端库。可以将以下代码添加到你的index.html文件中：

    <!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO test</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <h1>Hello world</h1>
    <script>
      const socket = io();
      socket.on('news', (data) => {
        console.log(data);
        socket.emit('my other event', { my: 'data' });
      });
    </script>
  </body>
</html>

确保index.html文件位于与服务器代码相同的目录中，并且文件名为index.html。

如果你仍然遇到问题，请检查网络请求是否正确加载了socket.io.js文件，并且确保没有其他HTML标签干扰JavaScript的执行。

回到顶部