当前位置: 首页 > news >正文

从 0 到 1,用 Python 构建超实用 Web 实时聊天应用

从 0 到 1,用 Python 构建超实用 Web 实时聊天应用

本文深入剖析如何运用 Python 的 Flask 框架与 SocketIO 扩展,搭建一个功能完备的 Web 实时聊天应用。从环境搭建、前后端代码实现,到最终运行展示,逐步拆解关键步骤,让你轻松掌握实时聊天应用开发技巧。

使用 Python 实现 Web 实时聊天案例,这里我们采用 Flask 作为 Web 框架,Flask-SocketIO 扩展来实现 WebSocket 通信,从而达到实时聊天的效果。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,非常适合实时应用场景。

文章目录

  • 从 0 到 1,用 Python 构建超实用 Web 实时聊天应用
    • 1. 环境搭建
    • 2. 项目结构
    • 3. 后端代码(`app.py`)
    • 4. 前端代码(`templates/index.html`)
    • 5. 运行应用
    • 总结:

在这里插入图片描述

1. 环境搭建

首先确保你已经安装了必要的 Python 库。可以使用pip命令安装flaskflask-socketio

pip install flask flask-socketio

2. 项目结构

chat_app/
├── app.py
├── templates
│   └── index.html
└── static└── styles.css  # 可选,用于样式美化

3. 后端代码(app.py

from flask import Flask, render_template
from flask_socketio import SocketIO, emitapp = Flask(__name__)
# 设置密钥,用于安全的WebSocket通信
app.config['SECRET_KEY'] ='secret!'
socketio = SocketIO(app)# 定义根路由,返回聊天页面
@app.route('/')
def index():return render_template('index.html')# 处理客户端发送的'message'事件
@socketio.on('message')
def handle_message(message):print('Received message: ', message)# 向所有连接的客户端广播消息(包括发送者自己)emit('message', message, broadcast=True)if __name__ == '__main__':# 启动SocketIO服务器,开启调试模式socketio.run(app, debug=True)

在上述代码中:

  • 首先创建了一个 Flask 应用实例,并设置了SECRET_KEY,这是为了保证 WebSocket 通信的安全。
  • 使用SocketIO类初始化 WebSocket 功能,并将其与 Flask 应用关联。
  • 定义了根路由/,返回index.html页面,即聊天界面。
  • @socketio.on('message')装饰器定义了一个事件处理函数,当客户端发送message事件时,该函数会被调用。函数接收到消息后,打印消息内容,并使用emit函数将消息广播给所有连接的客户端。

4. 前端代码(templates/index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Web Real-time Chat</title><script src="{{ url_for('static', filename='socket.io/socket.io.js') }}"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>/* 简单的样式设置,可根据需求修改 */body {font-family: Arial, sans-serif;}#chat-messages {height: 400px;overflow-y: scroll;border: 1px solid #ccc;padding: 10px;}#message-input {width: 80%;padding: 5px;}#send-button {padding: 5px 10px;}</style>
</head><body><h1>Web实时聊天</h1><div id="chat-messages"></div><input type="text" id="message-input" placeholder="输入消息"><button id="send-button">发送</button><script>// 连接到SocketIO服务器var socket = io.connect('http://' + document.domain + ':' + location.port);// 监听服务器发送的'message'事件socket.on('message', function (data) {var chatMessages = document.getElementById('chat-messages');var p = document.createElement('p');p.textContent = data;chatMessages.appendChild(p);chatMessages.scrollTop = chatMessages.scrollHeight;});// 发送按钮点击事件处理document.getElementById('send-button').addEventListener('click', function () {var messageInput = document.getElementById('message-input');var message = messageInput.value;if (message.trim()!== '') {socket.emit('message', message);messageInput.value = '';}});// 监听键盘回车键事件document.getElementById('message-input').addEventListener('keydown', function (event) {if (event.key === 'Enter') {document.getElementById('send-button').click();}});</script>
</body></html>

在这个前端代码中:

  • 引入了Socket.IO库和jQuery库,Socket.IO用于与后端的 WebSocket 进行通信,jQuery用于简化 DOM 操作和事件处理。
  • 定义了聊天消息显示区域、消息输入框和发送按钮。
  • 使用io.connect连接到后端的 SocketIO 服务器。
  • 监听服务器发送的message事件,当接收到消息时,将消息显示在聊天区域中,并自动滚动到最新消息。
  • 为发送按钮绑定点击事件,当点击按钮时,获取输入框中的消息并发送给服务器。
  • 监听输入框的键盘回车键事件,当按下回车键时,模拟发送按钮的点击操作。

5. 运行应用

在项目根目录下,运行app.py文件:

python app.py

然后在浏览器中访问http://127.0.0.1:5000/,即可进入聊天界面,多个用户同时访问该地址,就可以进行实时聊天了。

通过以上步骤,你就完成了一个简单的 Python Web 实时聊天应用,当然,你还可以根据实际需求对其进行扩展,比如添加用户认证、聊天记录存储等功能。

总结:

通过本次实践,我们利用 Python 的 Flask 和 SocketIO 成功打造了一个 Web 实时聊天应用。从后端路由与消息处理,到前端界面交互和事件监听,每个环节紧密配合。这不仅加深了对 Web 开发中实时通信原理的理解,也展示了 Python 在网络编程和 Web 应用开发方面的强大能力。开发者可在此基础上,根据实际需求添加更多高级功能,如用户管理、加密传输等,进一步完善应用。

TAGPython、Flask、SocketIO、Web 实时聊天、WebSocket、实时通信、Web 开发

相关文章:

从 0 到 1,用 Python 构建超实用 Web 实时聊天应用

从 0 到 1&#xff0c;用 Python 构建超实用 Web 实时聊天应用 本文深入剖析如何运用 Python 的 Flask 框架与 SocketIO 扩展&#xff0c;搭建一个功能完备的 Web 实时聊天应用。从环境搭建、前后端代码实现&#xff0c;到最终运行展示&#xff0c;逐步拆解关键步骤&#xff0…...

轻松搭建:使用Anaconda创建虚拟环境并在PyCharm中配置

一、使用Anaconda创建虚拟环境 1. 安装Anaconda 2..conda常用的命令 3. 创建虚拟环境-以搭建MachineVision为例 4. 激活虚拟环境 5. 安装依赖包 二、PyCharm配置环境 在进行Python项目开发时&#xff0c;合理的环境管理是必不可少的&#xff0c;特别是当你在多个项目中…...

【新人系列】Python 入门专栏合集

✍ 个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4dd; 专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12801353.html &#x1f4e3; 专栏定位&#xff1a;为 0 基础刚入门 Python 的小伙伴提供详细的讲解&#xff0c;也欢迎大佬们…...

linux ununtu安装mysql 怎么在my.cnf文件里临时配置 无密码登录

在 Ubuntu 中&#xff0c;若需通过修改 my.cnf 临时禁用 MySQL 的密码验证&#xff08;例如忘记 root 密码需要重置&#xff09;&#xff0c;可以通过添加 skip-grant-tables 选项实现。以下是具体步骤&#xff1a; 步骤 1&#xff1a;编辑 MySQL 配置文件 1. 打开 MySQL 配置…...

git,bash - 从一个远端git库只下载一个文件的方法

文章目录 git,bash - 从一个远端git库只下载一个文件的方法概述笔记写一个bash脚本来自动下载get_github_raw_file_from_url.shreanme_file.shfind_key_value.sh执行命令 END git,bash - 从一个远端git库只下载一个文件的方法 概述 github上有很多大佬上传了电子书库&#xf…...

python生成的exe文件防止反编译(pyinstaller加密)

python生成的exe文件可以轻松的被破解&#xff0c;为了防止反编译&#xff0c;知乎友友们给出了很多不同的见解&#xff0c;其中主流的回答是pyinstaller加密和niutka打包python&#xff0c;本篇介绍的方法是第一种&#xff0c;pyinstaller打包的时候进行加密&#xff0c;防破解…...

Android移动应用开发实践-1-下载安装和简单使用Android Studio 3.5.2版本(频频出错)

一、下载安装 1.Android Studio3.5.2下载地址&#xff1a;Android Studio3.5.2下载地址 其他版本下载地址&#xff1a;其他版本下载地址 2.安装教程&#xff08;可以多找几个看看&#xff09; 安装 | 手把手教你Android studio 3.5.2安装&#xff08;安装教程&#xff09;_a…...

Android Audio实战——音频相关基础概念(附)

Android Audio 开发其实就是媒体源数字化的过程,通过将声波波形信号通过 ADC 转换成计算机支持的二进制的过程叫做音频采样 (Audio Sampling)。采样 (Sampling) 的核心是把连续的模拟信号转换成离散的数字信号。 一、声音的属性 1、响度 (Loudness) 响度是指人类可以感知到的…...

5分钟使用Docker部署Paint Board快速打造专属在线画板应用

文章目录 前言1.关于Paint Board2.本地部署paint-board3.使用Paint Board4.cpolar内网穿透工具安装5.创建远程连接公网地址6.固定Paint Board公网地址 &#x1f4a1; 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住…...

vue实现根据点击或滑动展示对应高亮

页面需求&#xff1a; 点击左侧版本号&#xff0c;右侧展示对应版本内容并置于顶部右侧某一内容滚动到顶部时&#xff0c;左侧需要展示高亮 实现效果&#xff1a; 实现代码&#xff1a; <template><div><div class"historyBox pd-20 bg-white">…...

java练习(41)

ps&#xff1a;题目来自力扣 最接近的三数之和 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数&#xff0c;使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 import java.util.Arrays;class Solut…...

【二分查找 图论】P8794 [蓝桥杯 2022 国 A] 环境治理|普及

本文涉及的基础知识点 本博文代码打包下载 C二分查找 C图论 [蓝桥杯 2022 国 A] 环境治理 题目描述 LQ 国拥有 n n n 个城市&#xff0c;从 0 0 0 到 n − 1 n - 1 n−1 编号&#xff0c;这 n n n 个城市两两之间都有且仅有一条双向道路连接&#xff0c;这意味着任意两…...

Docker镜像面试题及参考答案

目录 Docker 镜像与容器的关系是什么?如何理解 “镜像为静态定义,容器为运行时实体”? 解释 Docker 镜像的联合文件系统(UnionFS)分层机制,为何这种设计能优化存储效率? Docker 镜像的 LABEL 标签有什么作用?如何通过标签管理多版本镜像? 镜像的 latest 标签有哪些…...

浅显易懂HashMap的数据结构

HashMap 就像一个大仓库&#xff0c;里面有很多小柜子&#xff08;数组&#xff09;&#xff0c;每个小柜子可以挂一串链条&#xff08;链表&#xff09;&#xff0c;链条太长的时候会变成更高级的架子&#xff08;红黑树&#xff09;。下面用超简单的例子解释&#xff1a; ​壹…...

Fisher信息矩阵与Hessian矩阵:区别与联系全解析

Fisher信息矩阵与Hessian矩阵&#xff1a;区别与联系全解析 在统计学和机器学习中&#xff0c;Fisher信息矩阵&#xff08;FIM&#xff09;和Hessian矩阵是两个经常出现的概念&#xff0c;它们都与“二阶信息”有关&#xff0c;常用来描述函数的曲率或参数的敏感性。你可能听说…...

【HTML— 快速入门】HTML 基础

准备工作 vscode下载 百度网盘 Subline Text 下载 Sublime Text下载 百度网盘 vscode 下载 Sublime Text 是一款轻量好用的文本编辑器&#xff0c;我们在写前端代码时&#xff0c;使用 Sublime Text 打开比使用记事本打开&#xff0c;得到的代码体验更好&#xff0c;比 vscode…...

Docker 与 Serverless(无服务器架构)

Serverless&#xff08;无服务器架构&#xff09; 是一种新的云计算架构&#xff0c;它通过让开发者专注于业务逻辑而无需管理服务器基础设施&#xff0c;来简化应用的开发和部署。Serverless 模型通常由云服务提供商管理基础设施的所有方面&#xff0c;而开发者只需提供代码和…...

DMA 定制固件教程:小白跟做即得单人固件,超详细纯喂饭教程,100% 成功秘籍!FPGA仿真1:1、中断逻辑和TLP核心都在。

DMA 定制固件教程 小白跟着操作做可以做出的单人固件 图文教程 链接&#xff1a;https://docs.qq.com/doc/DQ01lVGtHelROVHNv 本图文教程包含内容&#xff1a; 一、DMA仿真技术采集真实单人固件 二、网卡TLP仿真固件生成 三、DMA仿真技术io、中断逻辑&#xff0c;从零仿真 四、…...

嵌入式开发:傅里叶变换(4):在 STM32上面实现FFT(基于STM32L071KZT6 HAL库+DSP库)

目录 步骤 1&#xff1a;准备工作 步骤 2&#xff1a;创建 Keil 项目&#xff0c;并配置工程 步骤 3&#xff1a;在MDK工程上添加 CMSIS-DSP 库 步骤 5&#xff1a;编写代码 步骤 6&#xff1a;配置时钟和优化 步骤 7&#xff1a;调试与验证 步骤 8&#xff1a;优化和调…...

飞鱼科技游戏策划岗内推

协助策划完成相关工作&#xff0c;包括但不仅限于策划配置&#xff0c;资料搜集&#xff0c;游戏体验&#xff1b; 游戏策划相关作品&#xff1b;游戏大赛经历&#xff1b;游戏demo制作经历&#xff1b;游戏公司策划岗位实习经历优先 内推码 DSZP7YFU...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...

Redis上篇--知识点总结

Redis上篇–解析 本文大部分知识整理自网上&#xff0c;在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库&#xff0c;Redis 的键值对中的 key 就是字符串对象&#xff0c;而 val…...

Spring Boot SQL数据库功能详解

Spring Boot自动配置与数据源管理 数据源自动配置机制 当在Spring Boot项目中添加数据库驱动依赖&#xff08;如org.postgresql:postgresql&#xff09;后&#xff0c;应用启动时自动配置系统会尝试创建DataSource实现。开发者只需提供基础连接信息&#xff1a; 数据库URL格…...