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

Nodejs实时双向通信插件node-socket.io的使用
socket.io 是一个用于实时双向通信的库，非常适合在 Node.js 应用中实现实时功能。下面是一个简单的示例，展示如何在客户端和服务器之间进行实时通信。

1. 安装 socket.io

首先，你需要安装 socket.io 和 express（如果你打算使用 Express 来创建 HTTP 服务器）：

npm install express socket.io

2. 创建服务器端代码

接下来，我们创建一个简单的服务器端代码来初始化 socket.io 并监听连接事件。

// 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.on('chat message', (msg) => {
        console.log('message: ' + msg);
        // 向所有客户端广播消息
        io.emit('chat message', msg);
    });

    // 当用户断开连接时
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

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

3. 创建客户端代码

然后，我们创建一个简单的 HTML 页面，它将与服务器建立 WebSocket 连接，并发送/接收消息。

<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO chat</title>
    <style>
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
    </style>
</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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            var socket = io();
            $('form').submit(function(e){
                e.preventDefault(); // 阻止表单默认提交行为
                socket.emit('chat message', $('#m').val());
                $('#m').val('');
                return false;
            });
            socket.on('chat message', function(msg){
                $('#messages').append($('<li>').text(msg));
                window.scrollTo(0, document.body.scrollHeight);
            });
        });
    </script>
</body>
</html>

4. 设置静态文件服务

为了让客户端能够访问到 HTML 文件，我们需要配置 Express 来提供静态文件服务：

app.use(express.static(__dirname + '/public'));

将这段代码添加到你的 server.js 文件中，并确保 index.html 文件位于 public 目录下。

5. 运行应用

现在你可以运行你的应用了：

node server.js

打开浏览器并访问 http://localhost:3000，你应该能看到一个简单的聊天界面。在这个例子中，当用户发送一条消息时，它会通过 WebSocket 发送到服务器，服务器再将消息广播给所有已连接的客户端。

这就是使用 socket.io 实现基本的实时双向通信的一个简单示例。你可以在此基础上添加更多复杂的功能，如房间、用户身份验证等。


3 回复

嘿，朋友！说到Node.js里的实时双向通信，Socket.IO可是个大明星哦！它能让你的应用像变魔术一样，实现客户端和服务器之间的实时互动。想象一下，就像你和你的小伙伴同时玩一个游戏，无论谁做了什么动作，对方都能立刻看到！

首先，你需要安装Socket.IO，很简单，只需要在你的项目里敲下npm install socket.io这行魔法咒语。

接着，在你的服务器端代码里，就像这样：

const io = require('socket.io')(server);
io.on('connection', socket => {
  console.log('一位勇士已连接！');
  socket.on('message', msg => {
    console.log(`收到消息：${msg}`);
    socket.broadcast.emit('message', msg); // 向其他所有人广播消息
  });
});

而在客户端，你只需这样：

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
  socket.on('connect', () => {
    console.log('成功连接到服务器，准备大展身手！');
  });
  socket.on('message', msg => {
    console.log(`来自服务器的消息：${msg}`);
  });
</script>

现在，你可以开始构建你的实时应用了，比如在线聊天室、多人游戏等。是不是很酷？快去试试吧！


socket.io 是一个在 Node.js 中实现的实时通信库，它允许在客户端（通常是浏览器）和服务器之间建立实时的双向通信。下面是一个简单的示例，展示如何使用 socket.io 实现一个基本的实时通信应用。

1. 安装 socket.io

首先，你需要安装 socket.io 库。如果你还没有创建项目，可以先初始化一个新的 Node.js 项目：

mkdir myproject
cd myproject
npm init -y

然后安装 socket.io：

npm install socket.io

2. 创建服务器端代码

创建一个名为 server.js 的文件，并添加以下内容：

const http = require('http');
const { Server } = require('socket.io');

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

// 创建 socket.io 服务器
const io = new Server(server);

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

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

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

// 监听端口
server.listen(3000, () => {
    console.log('listening on *:3000');
});

3. 创建客户端代码

在同一目录下创建一个 index.html 文件，并添加以下内容：

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

document.getElementById('send').addEventListener('click', () => {
    const message = document.getElementById('message').value;
    socket.emit('message', message);
});

socket.on('response', (msg) => {
    alert(msg);
});
</script>
<input id="message" type="text" placeholder="Type a message...">
<button id="send">Send</button>
</body>
</html>

4. 运行你的应用

确保你的 HTML 文件位于服务器的根目录下，然后运行服务器：

node server.js

现在打开浏览器访问 http://localhost:3000，你应该能看到输入框和按钮。输入消息并点击发送，消息将通过 WebSocket 实时发送到服务器，服务器处理后会广播给所有连接的客户端。

这个例子展示了 socket.io 的基本使用方法，包括连接、发送和接收消息以及处理连接和断开事件。你可以在此基础上扩展更复杂的功能。

socket.io 是一个实现WebSocket通信的Node.js库，它支持实时双向通信。首先安装socket.io：

npm install socket.io

在服务器端，创建一个io实例，并监听连接事件：

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

客户端需要引入socket.io-client：

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

然后建立连接并监听事件：

let socket = io();
socket.on('news', (data) => {
  console.log(data);
  socket.emit('my other event', { my: 'data' });
});

这样就实现了基本的实时通信功能。

回到顶部