欢迎访问宙启技术站
智能推送

Python中使用Socket.IO实现实时在线投票系统

发布时间:2024-01-19 21:15:51

使用Socket.IO实现实时在线投票系统可以让用户实时看到投票结果,并且能够实时更新投票数量。下面是一个简单的使用Socket.IO实现实时在线投票系统的例子:

首先,需要安装Python的Socket.IO库。可以使用以下命令来安装:

pip install python-socketio

接下来,创建一个Python文件,命名为vote_server.py

import eventlet
import socketio

# 创建一个Socket.IO服务器
sio = socketio.Server()
app = socketio.WSGIApp(sio)

# 投票计数器
votes = {
    'option1': 0,
    'option2': 0
}

@sio.event
def connect(sid, environ):
    print('Client connected:', sid)
    # 发送当前的投票数量给新连接的客户端
    sio.emit('vote_count', votes)

@sio.event
def vote(sid, option):
    print('Vote received from', sid, ':', option)
    # 增加对应选项的投票数量
    votes[option] += 1
    # 更新投票结果给所有连接的客户端
    sio.emit('vote_count', votes)

@sio.event
def disconnect(sid):
    print('Client disconnected:', sid)

# 启动服务器
if __name__ == '__main__':
    eventlet.wsgi.server(eventlet.listen(('', 5000)), app)

然后,创建一个HTML文件,命名为vote_client.html

<!DOCTYPE html>
<html>

<head>
    <title>Real-time Voting System</title>
    <script src="https://cdn.socket.io/socket.io-3.1.1.min.js"></script>
    <script>
        // 创建一个Socket.IO客户端
        var socket = io('http://localhost:5000');

        // 当连接成功时,发送一个事件给服务器
        socket.on('connect', function () {
            console.log('Connected to server');
        });

        // 当收到投票结果时更新页面上的投票数量
        socket.on('vote_count', function (votes) {
            document.getElementById('option1_votes').innerText = votes.option1;
            document.getElementById('option2_votes').innerText = votes.option2;
        });

        // 当选择一个选项时,发送投票事件给服务器
        function vote(option) {
            socket.emit('vote', option);
        }

        // 关闭连接时发送一个事件给服务器
        window.addEventListener('beforeunload', function () {
            socket.emit('disconnect');
        });
    </script>
</head>

<body>
    <h1>Real-time Voting System</h1>
    <h2>Option 1:</h2>
    <button onclick="vote('option1')">Vote</button>
    <span id="option1_votes">0</span>
    <h2>Option 2:</h2>
    <button onclick="vote('option2')">Vote</button>
    <span id="option2_votes">0</span>
</body>

</html>

最后,运行vote_server.py文件,并在浏览器中打开vote_client.html文件,即可开始使用实时在线投票系统。

以上代码实现了一个基本的实时在线投票系统。当用户连接到服务器时,会向客户端发送当前的投票数量。用户可以通过点击按钮选择一个选项进行投票,投票结果将实时更新到页面上,并发送到服务器更新投票数量。