终于迁到Ubuntu下面了，发一下自己的Nodejs Demo，勿喷

终于迁到Ubuntu下面了，发一下自己的Nodejs Demo，勿喷

http://yaoyuxing03.ap01.aws.af.cm/ socket.io不知道为什么没效果，自己机器上到可以实现回复及时提醒功能，有些地方可能没防XSS，各位就高抬贵手吧，纯属学习用

2 回复

好的，让我们来详细解析一下这个帖子的内容，并提供一个简单的Node.js示例代码。这个示例将展示如何使用socket.io实现实时通信功能。

示例代码

首先，我们需要安装必要的依赖包：

npm install express socket.io

然后，创建一个基本的Node.js应用文件，例如server.js：

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

// 创建一个Express应用
const app = express();
const server = http.createServer(app);

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

// 启动服务器监听8080端口
server.listen(8080, () => {
    console.log('Server is running on port 8080');
});

// 创建Socket.IO实例并绑定到HTTP服务器
const io = socketIo(server);

// 监听客户端连接事件
io.on('connection', (socket) => {
    console.log('A user connected:', socket.id);

    // 监听客户端发送的消息
    socket.on('chat message', (msg) => {
        console.log('Message received:', msg);
        
        // 广播消息给所有连接的客户端
        io.emit('chat message', msg);
    });

    // 监听客户端断开连接事件
    socket.on('disconnect', () => {
        console.log('User disconnected:', socket.id);
    });
});

HTML页面

接下来，创建一个简单的HTML页面，用于与服务器进行实时通信。假设我们将这个页面放在与server.js相同的目录下，并命名为index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.IO Chat</title>
    <style>
        #messages { height: 400px; overflow-y: scroll; }
    </style>
</head>
<body>
    <div id="messages"></div>
    <input id="message" type="text" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        function sendMessage() {
            const message = document.getElementById('message').value;
            socket.emit('chat message', message);
            document.getElementById('message').value = '';
        }

        socket.on('chat message', function(msg) {
            const messagesDiv = document.getElementById('messages');
            const newMessage = document.createElement('div');
            newMessage.textContent = msg;
            messagesDiv.appendChild(newMessage);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        });
    </script>
</body>
</html>

解释

  1. Node.js服务器：我们使用Express框架创建了一个简单的HTTP服务器，并集成了Socket.IO来处理WebSocket连接。
  2. HTML页面：用户可以通过输入框发送消息，这些消息通过Socket.IO广播给所有连接的客户端，并实时显示在页面上。

XSS防护

为了防止跨站脚本攻击（XSS），你应该对用户输入的数据进行转义或过滤。在上面的示例中，我们没有进行XSS防护，但在实际应用中，你可以在显示用户消息之前使用库如he来转义HTML实体。

const he = require('he');

socket.on('chat message', function(msg) {
    const messagesDiv = document.getElementById('messages');
    const newMessage = document.createElement('div');
    newMessage.innerHTML = he.encode(msg); // 转义HTML实体
    messagesDiv.appendChild(newMessage);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
});

希望这个示例能帮助你理解如何在Node.js中使用socket.io实现基本的实时通信功能。


根据你的描述，你想分享一个简单的Node.js应用示例，并且提到你在使用socket.io时遇到了一些问题。我将提供一个基本的Node.js应用示例，该示例使用Express框架和socket.io库来创建一个简单的聊天室应用。这将帮助你了解如何设置环境，并确保socket.io功能正常工作。

示例代码

首先，确保你的项目中安装了必要的依赖：

npm init -y
npm install express socket.io

然后，创建一个文件（例如app.js），并添加以下代码：

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.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

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

同时，创建一个index.html文件在同一个目录下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Chat Room</title>
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io();

    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('message-form');
        const input = document.getElementById('m');
        const output = document.getElementById('messages');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });

        socket.on('chat message', function(msg) {
            const item = document.createElement('li');
            item.textContent = msg;
            output.appendChild(item);
        });
    });
</script>
</head>
<body>
<form id="message-form">
    <input id="m" autocomplete="off" />
    <button>Send</button>
</form>
<ul id="messages"></ul>
</body>
</html>

运行应用

在Ubuntu系统中运行这个应用：

node app.js

打开浏览器访问http://localhost:3000，你应该能看到一个简单的聊天室应用。

注意事项

确保服务器能够正确地处理跨域请求或网络配置问题。如果仍然遇到问题，检查防火墙设置或网络连接是否允许访问端口3000。

回到顶部