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

使用Flask-SocketIO构建实时Web应用

news 2026/4/7 13:57:21

文章目录

      • 准备工作
      • 编写代码
      • 编写HTML模板
      • 运行应用

随着互联网的发展，实时性成为了许多Web应用的重要需求之一。传统的HTTP协议虽然可以实现实时通信，但是其长轮询等机制效率低下，无法满足高并发、低延迟的需求。为了解决这一问题，诞生了WebSocket协议，它可以在客户端和服务器之间建立持久连接，实现双向通信，极大地提高了实时性。

在Python的Web开发领域，Flask是一个轻量级的Web框架，广受开发者喜爱。而Flask-SocketIO则是一个基于Flask的WebSocket扩展，可以方便地为Flask应用添加实时通信功能。本文将介绍如何使用Flask-SocketIO构建一个简单的实时Web应用。
在这里插入图片描述

准备工作

首先，确保你已经安装了Flask和Flask-SocketIO扩展：

pip install Flask Flask-SocketIO

编写代码

创建一个简单的Flask应用，并添加SocketIO支持：

from flask import Flask, render_template
from flask_socketio import SocketIO, emitapp = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)@app.route('/')
def index():return render_template('index.html')@socketio.on('message')
def handle_message(message):print('Received message: ' + message)emit('message', message, broadcast=True)if __name__ == '__main__':socketio.run(app)

编写HTML模板

创建一个简单的HTML模板index.html，用于展示实时通信的效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Real-time Chat</title><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js" integrity="sha384-fJpz2xK1GIM2bmivw9nUJ6By6dOzEn7lmOeLT4gV6cg9R3kYjKwOsgu0Ixhvcrld" crossorigin="anonymous"></script><script type="text/javascript">var socket = io.connect('http://' + document.domain + ':' + location.port);socket.on('message', function(data) {var p = document.createElement('p');p.innerHTML = data;document.getElementById('messages').appendChild(p);});function sendMessage() {var message = document.getElementById('message').value;socket.emit('message', message);document.getElementById('message').value = '';}</script>
</head>
<body><h1>Real-time Chat</h1><div id="messages"></div><input type="text" id="message" placeholder="Enter your message"><button onclick="sendMessage()">Send</button>
</body>
</html>

运行应用

现在，运行Flask应用，并在浏览器中访问http://localhost:5000，即可体验实时聊天功能了。你可以在多个浏览器窗口中打开该页面，发送消息，即可看到实时通信的效果。

通过Flask-SocketIO，我们可以轻松地构建实时Web应用，满足用户对实时性的需求。你可以进一步扩展该应用，实现更复杂的实时功能，如实时数据展示、多人协作编辑等。

相关文章：

使用Flask-SocketIO构建实时Web应用

文章目录 准备工作编写代码编写HTML模板运行应用 随着互联网的发展&#xff0c;实时性成为了许多Web应用的重要需求之一。传统的HTTP协议虽然可以实现实时通信&#xff0c;但是其长轮询等机制效率低下&#xff0c;无法满足高并发、低延迟的需求。为了解决这一问题&#xff0c;诞…...

编程日记 2024/5/14 9:54:38

可重构柔性装配产线：为工业制造领域注入了新的活力

随着科技的飞速发展&#xff0c;智能制造正逐渐成为引领工业革新的重要力量。在这一浪潮中&#xff0c;可重构柔性装配产线以其独特的技术优势和创新理念&#xff0c;为工业制造领域注入了新的活力&#xff0c;开启了创新驱动的智能制造新篇章。 可重构柔性装配产线是基于富唯智…...

编程日记 2024/5/14 9:52:35

懒人网址导航源码v3.9

测试环境 宝塔Nginx -Tengine2.2.3的PHP5.6 MySQL5.6.44 为防止调试错误&#xff0c;建议使用测试环境运行的php与mysql版本 首先用phpMyAdmin导入数据库文件db/db.sql 如果导入不行&#xff0c;请直接复制数据库内容运行sql语句也可以 再修改config.php来进行数据库配置…...

编程日记 2024/5/14 9:49:32

springboot 开启缓存 @EnableCaching(使用redis)

添加依赖 pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>application.yml 配置redis连参数 spring:# redis 配置redis:# 地址host: 127.0.0.…...

编程日记 2024/5/14 9:45:28

Adobe After Effects AE v24.3.0 解锁版 (视频合成及视频特效制作)

Adobe系列软件安装目录 一、Adobe Photoshop PS 25.6.0 解锁版 (最流行的图像设计软件) 二、Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具) 三、Adobe Premiere Pro v24.3.0 解锁版 (领先的视频编辑软件) 四、Adobe After Effects AE v24.3.0 解锁版 (视…...

编程日记 2024/5/14 9:42:22

Qt---文件系统

一、基本文件操作 1. QFile对文件进行读和写 QFile file( path 文件路径) 读&#xff1a; file.open(打开方式) QlODevice::readOnly 全部读取->file.readAll()&#xff0c;按行读->file.readLine()&#xff0c;atend()->判断是否读到文件尾 …...

编程日记 2024/5/14 9:41:21

ruoyi-vue-pro 使用记录（2）

ruoyi-vue-pro 使用记录&#xff08;2&#xff09; 数据库商城商品模块数据表营销数据库交易数据库统计数据库 数据库 商城 参考官方文档 ruoyi-vue-pro yudao 项目商城 mall 模块启用及相关SQL脚本 商品模块&#xff08;中心&#xff09;以 product_ 作为前缀的表交易模块…...

编程日记 2024/5/14 9:40:20

centos7中如何全局搜索一下nginx的配置文件？

在CentOS 7中搜索Nginx的配置文件&#xff0c;你可以使用一些常用的命令行工具&#xff0c;比如find、grep等。这些工具可以帮助你在文件系统中查找文件&#xff0c;也可以用来查找Docker容器内部的文件&#xff0c;只要你知道如何访问容器的文件系统。 1. 搜索系统中的Nginx配…...

编程日记 2024/5/14 9:39:17

2024年5月10日有感复盘

2024年5月10日有感复盘 时间 今天是一个很美好的一天&#xff0c;原因是很平凡&#xff0c;读书很平凡&#xff0c;玩游戏很平凡&#xff0c;然后生活很平凡&#xff0c;未来可期&#xff0c;听歌很舒服&#xff0c;很喜欢一个人呆在图书馆的感觉&#xff0c;很喜欢发呆&…...

编程日记 2024/5/14 9:38:16

C++通过json文件配置参数

一、安装nlohmann json nlohmann json&#xff1a;安装_nlohmann安装-CSDN博客 依次执行下面指令&#xff1a; git clone https://gitee.com/cuihongxi/mov_from_github.gitcd json-developmkdir buildcd buildcmake ..makesudo make install 二、安装完成后使用 #include…...

编程日记 2024/5/14 9:36:11

idea连接远程仓库

git ->克隆。 url为远程仓库的地址&#xff0c;输入好后&#xff0c;选择项目存放目录&#xff0c;再点击克隆 点击新窗口打开。 切换到对应分支...

编程日记 2024/5/14 9:35:10

初始Django

初始Django 一、Django的历史 ​ Django 是从真实世界的应用中成长起来的&#xff0c;它是由堪萨斯&#xff08;Kansas&#xff09;州 Lawrence 城中的一个网络开发小组编写的。它诞生于 2003 年秋天&#xff0c;那时 Lawrence Journal-World 报纸的程序员 Adrian Holovaty 和…...

编程日记 2024/5/14 9:33:07

leetcode56--合并区间

题目描述 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;interv…...

编程日记 2024/5/14 9:32:06

赋能数据库智能托管，Akamai 发布首款云计算业务线产品！

为了尽可能地简化数据库管理的复杂性&#xff0c;降低数据库成本&#xff0c;Akamai 在近期推出了首款 DBaaS&#xff08;数据库即服务&#xff09;产品——Linode Managed Database。这一数据库产品是 Akamai 自3月份收购 Linode 后发布的首款计算业务线产品。 一、更易用的数…...

编程日记 2024/5/14 9:31:05

Go语言系统学习笔记（三）：杂项篇

1. 写在前面 公司的新业务开发需要用到go语言&#xff0c;虽然之前没接触过这门语言&#xff0c;但在大模型的帮助下&#xff0c;边看项目边写代码也能进行go的项目开发&#xff0c;不过&#xff0c;写了一段时间代码之后&#xff0c;总感觉对go语言本身&#xff0c;我的知识体…...

编程日记 2024/5/14 9:30:03

黄仁勋炉边对话：创业的超能力与英伟达的加速计算之旅

在TiECon 2024大会上&#xff0c;英伟达的创始人兼CEO黄仁勋与风投公司Mayfield的管理合伙人纳文查德哈进行了一场深入的炉边对话。黄仁勋不仅分享了英伟达的创业故事&#xff0c;还谈到了他对创业和加速计算的深刻见解。下面是我对这次对话的总结&#xff0c;希望能给正在创业…...

编程日记 2024/5/14 9:27:00

.NET开源、功能强大、跨平台的图表库LiveChart2

LiveCharts2 是 从LiveCharts演变而来，它修复了其前身的主要设计问题，它专注于在任何地方运行，提高了灵活性，并继承LiveCharts原有功能。 极其灵活的数据展示图库 （效果图） 开始使用 Live charts 是 .Net 的跨平台图表库，请访问 https://livecharts.dev 并查看目标平…...

编程日记 2024/5/14 9:25:58

疯狂学英语

我上本科的时候&#xff0c;学校出国留学的气氛不浓厚&#xff0c;我们班只有一名同学有出国留学的倾向&#xff0c;我们宿舍八个人没有一个考虑过留学。 只有小昊&#xff0c;在本校上了研究生之后&#xff0c;不知道受到什么影响&#xff0c;想出国留学。那时候小昊利用一切…...

编程日记 2024/5/14 9:24:57

LeetCode //C - 93. Restore IP Addresses

93. Restore IP Addresses A valid IP address consists of exactly four integers separated by single dots. Each integer is between 0 and 255 (inclusive) and cannot have leading zeros. For example, “0.1.2.201” and “192.168.1.1” are valid IP addresses, bu…...

编程日记 2024/5/14 9:23:55

【数据结构】栈和队列OJ面试题

20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;由于C语言没有栈的接口&#xff0c;所以我们需要自己造一个“模子”。我们直接copy之前的实现的栈的接口就可以了&#xff08;可以看我之前的博客【数据结构】栈和队列-CSDN博客copy接口&#xff09;&…...

编程日记 2024/5/14 9:22:54

OpenClaw对接Qwen2.5-VL-7B：3步完成模型地址配置

OpenClaw对接Qwen2.5-VL-7B&#xff1a;3步完成模型地址配置 1. 为什么选择Qwen2.5-VL-7B作为OpenClaw的视觉大脑 去年我在尝试用OpenClaw自动化处理图片资料时&#xff0c;发现纯文本模型经常对截图内容"睁眼说瞎话"。直到遇到Qwen2.5-VL-7B这个多模态模型&#x…...

编程新知 2026/4/7 12:34:07

Windows下OpenClaw安装指南：快速对接千问3.5-9B镜像

Windows下OpenClaw安装指南&#xff1a;快速对接千问3.5-9B镜像 1. 为什么选择OpenClaw千问3.5-9B组合 去年我在处理日常办公自动化时&#xff0c;发现很多重复性工作既耗时又容易出错。尝试过各种RPA工具后&#xff0c;最终被OpenClaw的"AI智能体本地化"特性吸引。…...

编程新知 2026/4/7 11:29:12

颠覆式窗口控制：WindowResizer革命性尺寸调整技术全解析

颠覆式窗口控制&#xff1a;WindowResizer革命性尺寸调整技术全解析 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer WindowResizer——这款开源窗口尺寸控制工具&#xff0c;正以革…...

编程新知 2026/4/7 9:35:26

Windows 11 LTSC 应用商店安装工具：一键解锁完整应用生态

Windows 11 LTSC 应用商店安装工具&#xff1a;一键解锁完整应用生态 【免费下载链接】LTSC-Add-MicrosoftStore Add Windows Store to Windows 11 24H2 LTSC 项目地址: https://gitcode.com/gh_mirrors/ltscad/LTSC-Add-MicrosoftStore 你是否在使用Windows 11 LTSC版本…...

编程新知 2026/4/7 9:33:25

前端项目云服务器（阿里云/腾讯云轻量应用服务器）部署 付费说明+使用说明

便宜稳定部署&#xff1a;云服务器极简方案&#xff08;付费&#xff0c;新手性价比首选&#xff09; 阿里云 / 腾讯云 轻量应用服务器&#xff0c;属于付费部署方案&#xff0c;但性价比极高&#xff0c;是三种方案中唯一能实现“永久在线、长期稳定运行”的部署方式&#xf…...

编程新知 2026/4/7 7:38:23

2024年秋-华中科技大学-HUST-CSE-CTF实战入门：从Misc到PWN的解题思路与技巧精讲

1. CTF入门&#xff1a;从零开始的解题思维构建 第一次接触CTF比赛时&#xff0c;我完全被各种术语和题型搞懵了。Misc、PWN、Web、Reverse...这些名词就像天书一样。但经过几个月的实战&#xff0c;我发现CTF其实就像解谜游戏&#xff0c;关键在于建立正确的解题思维。 对于华…...

编程新知 2026/4/7 7:36:22

SEO 搜索推广需要哪些技能和工具

SEO 搜索推广需要哪些技能和工具 在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;搜索推广已经成为网站流量增长和品牌推广的关键。如果你是一个希望提升网站在搜索引擎中排名的人&#xff0c;了解SEO搜索推广需要哪些技能和工具是至关重要的。本文将从…...

编程新知 2026/4/7 6:00:48

SQL数据库如何优雅地更新JSON格式字段_使用内置解析函数

MySQL 5.7 应用 JSON_SET 实现安全局部更新&#xff0c;仅修改指定路径值、自动创建缺失路径、避免NULL转字符串&#xff1b;PostgreSQL 需设 jsonb_set 第四参数为true才递归建空对象&#xff1b;SQLite老版本须应用层解析修改。MySQL 5.7 怎么用 JSON_SET 安全更新 JSON 字段…...

编程新知 2026/4/7 6:00:48

用两块74LS153芯片在Quartus II里搭个8选1数据选择器，附仿真波形图

用两块74LS153芯片在Quartus II里实现8选1数据选择器的图形化设计 数字电路实验中&#xff0c;数据选择器是最基础也最实用的组合逻辑器件之一。对于刚接触Quartus II原理图设计的新手来说&#xff0c;用图形化方式搭建电路不仅能避开HDL编码的复杂性&#xff0c;还能直观理解芯…...

编程新知 2026/4/7 5:38:30

RNN、LSTM、BiLSTM 算法学习笔记

NLP-AHU-026一、RNN1.我之前学的普通神经网络和CNN&#xff0c;都是一次性处理数据的&#xff0c;比如给一张图片&#xff0c;它就直接分析这张图的像素&#xff0c;不会管前后的关联。但现实里很多数据都是有顺序的&#xff0c;像咱们读课文、看视频&#xff0c;得结合上下文才…...

编程新知 2026/4/7 5:13:12