Socket.IO-客房(1) - 芒果文档

📌 相关文章

📜 Socket.IO-客房(1)

📅 最后修改于: 2023-12-03 14:47:30.503000 🧑 作者: Mango

Socket.IO-客房介绍

Socket.IO-客房是一个实时的、双向的、基于WebSockets的通信库。它允许开发者在客户端和服务器之间实现实时通信。Socket.IO-客房是为web应用程序开发者设计的，支持跨浏览器和跨平台，可以与任何前端框架（如Angular、React、Vue等）和任何后端框架（如Node.js、Rails、Django等）一起使用。

为什么要使用Socket.IO-客房？

即时通讯：使用Socket.IO-客房可以实现实时通讯功能，如聊天室、实时在线游戏等；
跨平台支持：Socket.IO-客房支持在多个平台上运行，如PC、移动设备等；
双向数据传输：Socket.IO-客房可以实现双向数据传输，允许客户端和服务器之间实现实时通信；
实时数据更新：Socket.IO-客房允许实时数据更新，无需刷新页面，更新数据直接呈现在客户端界面上；
事件驱动: Socket.IO-客房是一个事件驱动的库，允许开发者在客户端和服务器之间发送事件。

如何使用Socket.IO-客房？

安装

可以通过npm安装Socket.IO-客房：

npm install socket.io

服务器端代码示例

以下是一个在Node.js中使用Socket.IO-客房的例子：

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

io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
    socket.on('chat message', (msg) => {
        console.log('message: ' + msg);
        io.emit('chat message', msg);
    });
});

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

这段代码中，我们首先引入了express、http和socket.io库。通过http.Server创建一个服务器之后，我们创建了一个socket.io实例并将其连接到服务器。然后我们监听连接事件，当有用户连接时，在控制台输出提示。当用户断开连接时，我们同样输出提示。当客户端发送chat message事件时，我们接收消息内容，并使用io.emit方法将消息内容发送给所有连接到服务器的客户端。

客户端代码示例

以下是一个在浏览器中使用Socket.IO-客房的例子：

<!DOCTYPE html>
<html>

<head>
    <title>Socket.IO-客房</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <ul id="messages"></ul>
    <form id="chat">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script>
        var socket = io();
        $('form#chat').submit(function () {
            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>

这段代码中，我们首先在HTML中引入了socket.io.js文件和jquery库。我们创建了一个表单以便输入聊天室消息，提交表单时通过socket.emit方法将消息内容发送给服务器。在客户端接收到服务器发送过来的chat message事件时，我们将消息内容显示在聊天室中。