Nodejs Socket.IO 使用范例

Nodejs Socket.IO 使用范例

看见社区里有人问Socket.IO，我就发几个自己写的小例子，是根据Socket.IO的官网写的，当然自己也多少修改了一点 https://github.com/YanYuMiao/Socket.IO 好吧，我承认这弱爆了 o(∩_∩)o

3 回复

好的，以下是关于“Node.js Socket.IO 使用范例”的帖子内容，包括简单的示例代码和解释。

Node.js Socket.IO 使用范例

看见社区里有人问Socket.IO，我就发几个自己写的小例子，是根据Socket.IO的官网写的，当然自己也多少修改了一点。
Socket.IO 示例代码
好吧，我承认这弱爆了 o(∩_∩)o

示例一：基本的聊天室

服务端代码 (server.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);

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

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

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

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

客户端代码 (client.html)

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

        document.addEventListener('DOMContentLoaded', () => {
            const form = document.querySelector('form');
            const input = document.querySelector('#input');
            const messages = document.querySelector('#messages');

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

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

解释

  1. 服务端 (server.js):

    • 创建一个Express应用，并使用HTTP服务器。
    • 使用Socket.IO模块创建一个WebSocket服务器。
    • 监听客户端的连接事件，每当有新用户连接时，打印连接信息。
    • 当接收到chat message事件时，将消息广播给所有连接的客户端。
    • 当客户端断开连接时，打印断开信息。

  2. 客户端 (client.html):

    • 引入Socket.IO客户端库。
    • 监听表单提交事件，当用户输入消息并提交时，通过Socket.IO发送消息到服务器。
    • 接收来自服务器的消息，并将其显示在页面上。

以上就是使用Socket.IO创建一个简单的聊天室的基本步骤。你可以通过访问http://localhost:3000来测试这个聊天室功能。希望这个例子对你有所帮助！


楼主，我要用于express4.x里面，按照官方的总是报错，求指导。能不能写个例子参考下。

对于“Node.js Socket.IO 使用范例”这个问题，我会提供一个简单的Socket.IO使用示例。该示例包含服务器端和客户端的基本用法，通过WebSocket实现浏览器与服务器之间的实时通信。

服务器端代码

首先安装Socket.IO库：

npm install socket.io

然后创建server.js文件：

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

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('<h1>Welcome to the Socket.IO Server!</h1>');
});

// 初始化Socket.IO
const socketServer = io(server);

// 监听连接事件
socketServer.on('connection', (socket) => {
    console.log('A user connected!');

    // 接收消息
    socket.on('message', (msg) => {
        console.log(`Received message: ${msg}`);
        // 广播消息给所有客户端
        socketServer.emit('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>Socket.IO Example</title>
<script src="/socket.io/socket.io.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const socket = io();

        // 连接成功后发送一条欢迎消息
        socket.on('connect', () => {
            console.log('Connected to server!');
            socket.emit('message', 'Hello from client!');
        });

        // 接收消息并显示在控制台
        socket.on('message', (msg) => {
            console.log(`Received message from server: ${msg}`);
        });
    });
</script>
</head>
<body>
    <h1>Socket.IO Client</h1>
</body>
</html>

运行

运行你的Node.js服务器（确保在包含这两个文件的目录中）：

node server.js

现在打开浏览器访问http://localhost:3000，你应该能在控制台看到服务器与客户端之间交互的消息。

以上就是一个非常基础的Socket.IO应用示例。你可以在此基础上进行扩展，添加更多的功能和复杂性。

回到顶部