Nodejs实时双向通信插件socket.io的使用

发布于 1周前 作者 eggper 来自 nodejs/Nestjs

Nodejs实时双向通信插件socket.io的使用
Socket.IO 是一个用于实现实时双向通信的库,它可以在 Node.js 中非常方便地实现 WebSocket 通信。下面是一个简单的例子来展示如何在 Node.js 应用中使用 Socket.IO

1. 安装 Socket.IO

首先你需要安装 Socket.IO 及其客户端版本:

npm install socket.io

如果你的前端也需要使用 Socket.IO,你也需要安装客户端库(通常通过 CDN 引入):

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

2. 服务端设置

接下来,在你的 Node.js 服务器中引入并配置 Socket.IO

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

// 创建 Express 应用
const app = express();

// 创建 HTTP 服务器
const server = http.createServer(app);

// 将 Socket.IO 与 HTTP 服务器关联
const io = socketIo(server);

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

    // 监听来自客户端的消息
    socket.on('message', (msg) => {
        console.log('Message received:', msg);
        
        // 向所有连接的客户端广播消息
        io.emit('message', `Server: ${msg}`);
    });

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

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

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

3. 客户端设置

在客户端,你可以使用 Socket.IO 的客户端库来连接到服务器,并发送/接收消息:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.IO Example</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>

    <script>
        const socket = io();

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value;
            
            // 发送消息给服务器
            socket.emit('message', message);

            // 清空输入框
            input.value = '';
        }

        // 接收来自服务器的消息
        socket.on('message', (msg) => {
            const messages = document.getElementById('messages');
            const li = document.createElement('li');
            li.textContent = msg;
            messages.appendChild(li);
        });
    </script>
</body>
</html>

这个例子展示了如何在客户端和服务器之间建立一个简单的实时通信系统。你可以根据自己的需求扩展这个基本示例,例如添加身份验证、处理不同的消息类型等。


3 回复

Socket.IO 确实是实现 Node.js 实时双向通信的强大工具。首先,你需要安装它,只需在项目目录下运行 npm install socket.io

接着,在你的服务器端代码中,引入并设置 Socket.IO

const io = require('socket.io')(server);
io.on('connection', (socket) => {
  console.log('A user connected');
  
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

客户端也需引入 Socket.IO 客户端库,并连接到服务器:

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

这样,你就可以开始发送和接收事件了!试试发送一些有趣的消息吧,比如“宇宙新闻:小行星正朝地球飞来!”


Socket.IO 是一个强大的库,它能让您的 Node.js 服务器与客户端(如浏览器)之间实现实时、双向的通信。下面是一个简单的例子来展示如何设置和使用 Socket.IO

首先,你需要安装 Socket.IO。你可以通过 npm 安装:

npm install socket.io

然后在你的 Node.js 应用程序中设置 Socket.IO。这里有一个基本的例子:

  1. 创建服务器:
const http = require('http');
const express = require('express');
const { Server } = require("socket.io");

// 初始化 Express 和 HTTP 服务器
const app = express();
const server = http.createServer(app);

// 创建 Socket.IO 服务器实例,传入 HTTP 服务器
const io = new Server(server);

// 设置一个路由,返回一个 HTML 页面
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

server.listen(3000, () => {
    console.log('listening on *:3000');
});
  1. 在服务器上处理连接和事件:
io.on('connection', (socket) => {
    console.log('a user connected');
    
    // 监听来自客户端的消息
    socket.on('chat message', (msg) => {
        console.log('message: ' + msg);
        
        // 将消息广播给所有连接的客户端
        io.emit('chat message', msg);
    });

    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
});
  1. 创建一个简单的 HTML 文件 index.html,用于接收和发送消息:
<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO chat</title>
</head>
<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();
        const form = document.querySelector('form');
        const input = document.getElementById('m');
        const messages = 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;
            messages.appendChild(item);
        });
    </script>
</body>
</html>

这个示例展示了如何设置一个基本的 Socket.IO 服务器,处理连接和消息,并且创建了一个简单的 HTML 页面来发送和接收这些消息。希望这可以帮助你开始使用 Socket.IO

Socket.IO 是一个实现WebSocket实时双向通信的Node.js库。使用步骤如下:

  1. 安装:npm install socket.io
  2. 服务器端引入:const io = require('socket.io')(server);
  3. 监听连接事件:io.on('connection', socket => {});
  4. 客户端引入:<script src="/socket.io/socket.io.js"></script>
  5. 建立连接:var socket = io();
  6. 发送和监听消息:socket.emit('事件名', 数据);socket.on('事件名', 数据 => {});

这样就实现了客户端与服务端的实时通信。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!