Python web实战 | 使用 Flask 实现 Web Socket 聊天室

news2024/11/17 17:41:39

3dcf56931dc74659a0b04e561ec6d525.jpg


 

概要

 

今天我们学习如何使用 Python 实现 Web Socket,并实现一个实时聊天室的功能。本文的技术栈包括 Python、Flask、Socket.IO 和 HTML/CSS/JavaScript。

 

什么是 Web Socket?

Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 中的一部分,并且可以在浏览器和服务器之间创建实时的交互式 Web 应用程序。Web Socket 通过在服务器和客户端之间建立持久连接,实现了实时的双向数据传输。

Web Socket 和 Socket 有什么关系和区别

WebSocket和Socket都是用于网络通信的协议。

Socket是一种在网络应用程序中使用的标准API,它允许应用程序通过TCP或UDP协议与另一个计算机上的应用程序进行通信。Socket API提供了一组函数,用于创建和管理网络套接字,以便应用程序可以通过网络发送和接收数据。Socket通常用于客户端/服务器应用程序,例如APP通过Socket连接到后端服务器实时收发数据。

WebSocket是一种在Web浏览器和Web服务器之间进行双向通信的协议。WebSocket 在 socket 基础上封装了一些与 HTTP 协议相关的内容,例如握手协议帧协议等。同时,WebSocket 还提供了一些额外的特性,例如心跳机制、Ping/Pong 消息等,以确保连接的稳定性和可靠性。

因此,WebSocket是一种特定类型的Socket,它在Web应用程序中使用,允许双向通信和服务器主动推送数据。而Socket是一种通用的网络通信API,可用于各种类型的应用程序。

如何使用 Python 实现 Web Socket?

要在 Python 中实现 Web Socket,我们可以使用 Socket.IO 库。Socket.IO 是一个跨平台的实时应用程序框架,它使得在客户端和服务器之间实现实时双向通信变得容易。在本文中,我们将使用 Flask-SocketIO 扩展来集成 Socket.IO 和 Flask。

以下是如何使用 Python 实现 Web Socket 的步骤:

步骤 1:创建 Flask 应用程序

首先,我们需要创建一个 Flask 应用程序。在这个应用程序中,我们将创建一个路由来呈现聊天室页面。聊天室页面将包含一个输入框和一个消息列表。当用户输入一条消息时,我们将使用 Web Socket 将消息发送到服务器,并将其广播到所有连接的客户端。

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    socketio.run(app)

在上面的代码中,我们创建了一个名为 app 的 Flask 应用程序,并使用 Flask-SocketIO 将其包装成一个 Socket.IO 应用程序。还定义了一个路由,用于呈现聊天室页面。

步骤 2:创建聊天室页面

然后创建一个聊天室页面。聊天室页面将包含一个输入框和一个消息列表。当用户输入一条消息时,我们将使用 Web Socket 将消息发送到服务器,并将其广播到所有连接的客户端。

<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO Chat</title>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <style>
        #messages {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul id="messages"></ul>
    <input id="message_input" autocomplete="off" />
    <button id="send_button">Send</button>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        socket.on('connect', function() {
            socket.emit('my event', {data: 'I\'m connected!'});
        });
        socket.on('message', function(msg) {
            $('#messages').append($('<li>').text(msg.data));
        });
        $('#send_button').click(function(event) {
            socket.send($('#message_input').val());
            $('#message_input').val('').focus();
        });
    </script>
</body>
</html>

在上面的代码中,我们定义了一个 HTML 页面,其中包含一个消息列表、一个输入框和一个发送按钮。当用户点击发送按钮时,我们使用 Web Socket 将消息发送到服务器,并将其广播到所有连接的客户端。

步骤 3:实现 Web Socket 服务器

在服务器端,监听 Web Socket 连接,并在收到消息时将其广播给所有连接的客户端。

@socketio.on('message')
def handle_message(message):
    print('received message: ' + message)
    send(message, broadcast=True)

在上面的代码中,我们使用 Flask-SocketIO 的 socketio.on 装饰器监听名为 message 的事件,并在收到消息时将其广播给所有连接的客户端。

步骤 4:启动应用程序

在命令行中运行以下命令:

python app.py

现在,您可以在浏览器中访问 http://localhost:5000,进入聊天室页面。当您输入一条消息并点击发送按钮时,它将被发送到服务器,并将其广播给所有连接的客户端。

技术总结

本文介绍了如何使用 Python 和 Flask-SocketIO 实现 Web Socket,并创建了一个实时聊天室应用程序。Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议,它使得在客户端和服务器之间实现实时双向通信变得容易。

使用 Flask-SocketIO,我们可以很简单地将 Socket.IO 集成到 Flask 应用程序中,并实现实时双向通信。通过使用 Socket.IO,我们可以在浏览器和服务器之间创建实时的交互式 Web 应用程序。

 

如果文章对你有所帮助,欢迎点赞收藏转发,感谢🙏

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/814278.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SAMBA 文件分享相关 笔记

目标说明 在Linux 安装Samba&#xff0c;然后在Windows端映射为网络硬盘 流程 Linux 端命令 apt install samba -y 默认情况下软件会询问是否迁移系统网络设置以搭建协议&#xff0c;选择迁移即可修改配置文件 vim /etc/samba/smb.conf Samba 的配置文件中会带一个名为 prin…

【Mybatis】Mybatis架构简介

文章目录 1.整体架构图2. 基础支撑层2.1 类型转换模块2.2 日志模块2.3 反射工具模块2.4 Binding 模块2.5 数据源模块2.6缓存模块2.7 解析器模块2.8 事务管理模块 3. 核心处理层3.1 配置解析3.2 SQL 解析与 scripting 模块3.3 SQL 执行3.4 插件 4. 接口层 1.整体架构图 MyBatis…

第5集丨webpack 江湖 —— 项目发布 和 source map

目录 一、webpack项目发布1.1 新增发布(build)命令1.2 优化js和图片文件的存放路径1.3 执行1.4 效果 二、clean-webpack-plugin插件2.1 安装2.2 配置2.3 执行 三、source map3.1 配置3.2 生成的source map文件 四、定义符4.1 配置4.2 使用 五、工程附件汇总5.1 webpack.config.…

大麦订单一键生成 仿大麦订单生成

后台一键生成链接&#xff0c;独立后台管理 教程&#xff1a;修改数据库config/Conn 不会可以看源码里有教程 下载程序&#xff1a;https://pan.baidu.com/s/16lN3gvRIZm7pqhvVMYYecQ?pwd6zw3

强化学习(EfficientZero)(应用于图像和声音)

目录 摘要 1.背景介绍 2.MCTS&#xff08;蒙特卡洛树搜索&#xff09;&#xff08;推理类模型&#xff0c;棋类效果应用好&#xff0c;控制好像也不错&#xff09; 3.MUZERO 4.EfficientZero&#xff08;基于MUZERO&#xff09; 展望 参考文献 摘要 在文中&#xff0c;基于…

【雕爷学编程】MicroPython动手做(20)——掌控板之三轴加速度5

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

数学建模 好文章和资源推荐

数学建模入门篇(0基础必看&#xff0c;全是自己的经验) 【竞赛|数学建模】Part 1&#xff1a;什么是数学建模和各模块介绍 0基础小白&#xff0c;如何入门数学建模&#xff1f; 数学建模入门篇(0基础必看&#xff0c;全是自己的经验) 什么是数学建模 重申了一下题目&#xff…

基于SpringBoot+Vue的地方废物回收机构管理系统设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

并发编程——线程池

1.概述 如果并发的线程过多&#xff0c;而且执行的时间都非常短&#xff0c;如果这样&#xff0c;每次都要创建线程就会大大降低效率&#xff0c;我们可以通过线程池来解决&#xff0c;JDK5增加了内置线程池ThreadPollExecutor。 2.线程池的优点 1.重复利用&#xff0c;降低…

【LeetCode】单链表——刷题

你曾经灼热的眼眶&#xff0c;是人生中少数的笨拙又可贵的时刻。 文章目录 1.反转单链表 题目思路及图解 代码中需要注意的问题 2.移除链表元素 题目思路及图解 代码中需要注意的问题 大家好&#xff0c;我是纪宁。 这篇文章分享给大家一些经典的单链表leetcode笔试题的…

【Unity 实用插件篇】 | 行为状态机StateMachine,规范化的管理对象行为

前言【Unity 实用插件篇】 | 行为状态机StateMachine 学习使用一、StateMachine行为状态机 介绍二、StateMachine 结构分析三、StateMachine状态机详细使用流程3.1 第一步:创建状态机Transition Table SO3.2 第二步:创建对应状态的 State SO3.3 第三步:创建状态的切换条件 C…

Hadoop学习指南:探索大数据时代的重要组成——运行环境搭建

Hadoop运行环境搭建&#xff08;开发重点&#xff09; 模板虚拟机环境准备 数据来源层 安装模板虚拟机&#xff0c;IP地址192.168.10.100、主机名称hadoop100、内存4G、硬盘50G hadoop100 虚拟机配置要求如下&#xff08;本文Linux系统全部以CentOS-7.5-x86-1804为例&#…

小研究 - Java 虚拟机实现原理分析

针对虚拟机的底层实现原理及相关实现过程&#xff0c;讨论了 Java 语言的跨平台原理以及相关工作机制&#xff0c;分析了 JVM 底层各数据区内存管理过程&#xff0c;阐述了 JVM 在 Java 语言中的核心作用以及重要地位。 目录 1 概述 2 Java 平台分层原理 3 虚拟机工作原理 …

CDC一键入湖:当 Apache Hudi DeltaStreamer 遇见 Serverless Spark

文章目录 1. 整体架构2. 环境准备3. 配置全局变量4. 创建专属工作目录和存储桶5. 创建 EMR Serverless Execution Role6. 创建 EMR Serverless Application7. 提交 Apache Hudi DeltaStreamer CDC 作业7.1 准备作业描述文件7.2 提交作业7.3 监控作业7.4 错误检索7.5 停止作业 8…

仿转转闲鱼链接后台生成

教程&#xff1a;修改数据库账号密码直接使用。 源码带有教程! 下载程序&#xff1a;https://pan.baidu.com/s/16lN3gvRIZm7pqhvVMYYecQ?pwd6zw3

TIA博途中通过UDT实现IO地址映射到DB块中的具体方法

TIA博途中通过UDT实现IO地址映射到DB块中的具体方法 如下图所示,打开TIA博途,新建一个项目,添加一个PLC UDT数据类型Iomap,数据类型为Array[0…49] of Byte, 如下图所示,再添加一个全局DB块,在DB块中添加一个变量map,数据类型为Iomap, 如下图所示,在PLC变量表中添加一…

iOS开发-NotificationServiceExtension实现实时音视频呼叫通知响铃与震动

iOS开发-NotificationServiceExtension实现实时音视频呼叫通知响铃与震动 在之前的开发中&#xff0c;遇到了实时音视频呼叫通知&#xff0c;当App未打开或者App在后台时候&#xff0c;需要通知到用户&#xff0c;用户点击通知栏后是否接入实时音视频的视频或者音频通话。 在…

【微服务】springboot整合mongodb使用详解

目录 一、mongodb简介 1.1 什么是mongodb 1.2 mongodb特点 二、mongodb中的核心术语 2.1 mogodb与数据库对比 2.2 mongodb中的核心概念 2.3 与关系数据库的差异 2.3.1 半结构化 2.3.2 支持多级嵌套 2.3.3 关系弱化 三、mongodb 技术优势和应用场景 3.1 mongodb 技术…

redis主从复制哨兵Cluster

目录 前言 一、模式介绍 1.1 主从复制 1.2 哨兵 1.3 集群 二、主从复制 2.1 主从复制的作用 2.2 主从复制流程 2.3 搭建Redis 主从复制 三、Redis 哨兵模式 3.1 哨兵模式原理 3.2 哨兵模式的作用 3.3 哨兵组成结构 3.4 哨兵故障转移机制 3.5 搭建Redis 哨兵模式…

利用频谱仪进行简单的2.4G 频率测试

一、概述 1. 信号源 我们开发2.4G 无线产品的时候&#xff0c;经常需要对产品的无线信号进行测试&#xff0c;以确定精确的频率。在进行频率测试之前&#xff0c;我们的2.4G 射频芯片需要进入单载波模式。 2. 频谱仪 这里选择的是普源的频谱仪。测试范围是 9kHz - 3.2GHz。…