socket io 前后端样例

漫无目的行走的月亮

已于 2025-02-09 10:51:39 修改

阅读量432

点赞数 12

文章标签： python 开发语言

于 2025-02-09 10:28:51 首次发布

本文链接：https://blog.youkuaiyun.com/catontower/article/details/145528910

版权

Socket.IO是一个用于实现实时双向通信的库，最初是为Node.js开发的，用于解决WebSocket在不同浏览器和网络环境中的兼容性问题。它提供了一个统一的API，使得开发者可以轻松实现实时双向通信，而不必担心底层传输协议的差异。目前，Socket.IO不仅支持Node.js，还扩展到了Python、Java、.NET等多种编程语言和平台。

Socket.IO主要由服务器端和客户端两部分组成：

Socket.IO Server：在服务器端运行，处理客户端连接、消息传递和事件管理。
Socket.IO Client：在客户端运行，负责建立连接、发送和接收消息。服务器和客户端通过Socket.IO协议进行通信，底层使用WebSocket或其他回退传输机制。

Socket.IO常用于以下场景：

实时聊天应用：如在线客服、聊天室等，消息能够即时到达客户端。
实时数据推送：如股票价格更新、体育比赛实时比分等应用。
多人协作应用：如多人在线编辑、协作工具等。
实时游戏：多人在线游戏，尤其是需要实时交互的场景。

后端python：

import socketio

class ChatServer:
    def __init__(self):
        # 创建Socket.IO服务器实例
        self.sio = socketio.Server(cors_allowed_origins='*')
        self.app = socketio.WSGIApp(self.sio)

        # 注册事件处理
        self.sio.on('connect', self.handle_connect)
        self.sio.on('disconnect', self.handle_disconnect)
        self.sio.on('chat_message', self.handle_message)

    def handle_connect(self, sid, environ):
        print(f"用户 {sid} 已连接")
        self.sio.emit('chat_message', {'user': '系统', 'message': f'用户 {sid} 已加入聊天'}, room=sid)

    def handle_disconnect(self, sid):
        print(f"用户 {sid} 已断开连接")
        self.sio.emit('chat_message', {'user': '系统', 'message': f'用户 {sid} 已离开聊天'})

    def handle_message(self, sid, data):
        print(f"用户 {sid} 发送消息: {data['message']}")
        # 广播消息给所有用户
        self.sio.emit('chat_message', {'user': sid, 'message': data['message']})

    def run(self, host='0.0.0.0', port=4800):
        import eventlet
        eventlet.wsgi.server(eventlet.listen((host, port)), self.app)

# 启动服务器
if __name__ == '__main__':
    server = ChatServer()
    server.run()

前端：

<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.IO 聊天室</title>
</head>
<body>
    <h1>聊天室</h1>
    <div id="messages"></div>
    <input id="message_input" placeholder="输入消息...">
    <button onclick="sendMessage()">发送</button>

    <script>
        const socket = io('http://localhost:4800');

        // 接收消息并展示
        socket.on('chat_message', function(data) {
            const messageDiv = document.getElementById('messages');
            const newMessage = document.createElement('p');
            newMessage.textContent = `${data.user}: ${data.message}`;
            messageDiv.appendChild(newMessage);
        });

        // 发送消息
        function sendMessage() {
            const input = document.getElementById('message_input');
            socket.emit('chat_message', {message: input.value});
            input.value = '';
        }
    </script>
</body>
</html>