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

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

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 SocketIOapp = 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 应用程序。

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章:

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

概要 今天我们学习如何使用 Python 实现 Web Socket&#xff0c;并实现一个实时聊天室的功能。本文的技术栈包括 Python、Flask、Socket.IO 和 HTML/CSS/JavaScript。 什么是 Web Socket&#xff1f; Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 中的…...

Android10 Recovery系列(一)隐藏recovery菜单项

一 、背景 起因是遇到了一个隐藏删除recovery菜单项的需求。在寻找解决问题的时候,我经历了找到源码位置,调试修改,生效,思考是否可拓展,优化修改,符合要求的整个过程,下面简单分享一下。如果不想立即实现效果或者只想看解决方案,可以直接看总结那一个部分 二 、准备…...

选好NAS网络储存解决方案,是安全储存的关键

随着网络信息的发展&#xff0c;NAS也越来越受到企业的关注&#xff0c;NAS网络存储除了提供简单的存储服务外&#xff0c;还可以提供更好的数据安全性、更方便的文件共享方式。但市面上的产品种类繁多&#xff0c;我们该如何选择合适的产品&#xff0c;通过企业云盘&#xff0…...

AnimateDiff论文解读-基于Stable Diffusion文生图模型生成动画

文章目录 1. 摘要2. 引言3. 算法3.1 Preliminaries3.2. Personalized Animation3.3 Motion Modeling Module 4. 实验5.限制6. 结论 论文&#xff1a; 《AnimateDiff: Animate Your Personalized Text-to-Image Diffusion Models without Specific Tuning》 github: https://g…...

centos7安装tomcat

安装tomcat 必须依赖 JDK 环境&#xff0c;一定要提前装好JDK保证可以使用 一、下载安装包 到官网下载 上传到linux 服务器 二、安装tomcat 创建tomcat 文件夹 mkdir -p /usr/local/tomcat设置文件夹权限 chmod 757 tomcat将安装包上传至 新建文件夹 解压安装包 tar zx…...

【C#教程】零基础从入门到精通

今天给大家分享一套零基础从入门到精通&#xff1a;.NetCore/C#视频教程&#xff1b;这是2022年最新整理的、590G的开发教程资料。课程涵盖了.Net各方面的知识&#xff0c;跟着这个教程学习&#xff0c;就足够了。 课程分类 1、C#从基础到精通教程&#xff1b; 2、Winform从…...

opencv rtsp 硬件解码

讨论使用opencv的reader 硬件解码的方案有太多种&#xff0c;如果使用ffmpeg硬件解码是最方便的&#xff0c;不方便的是把解码过后的GPU 拉到 CPU 上&#xff0c;再使用opencv的Mat 从cpu 上上载到gpu上&#xff0c;是不是多了两个过程&#xff0c;应该是直接从GPU mat 直接去…...

机器学习-Gradient Descent

机器学习(Gradient Descent) videopptblog 梯度下降(Gradient Descent) optimization problem: 损失函数最小化 假设本模型有两个参数&#x1d703;1和&#x1d703;2&#xff0c;随机取得初始值 求解偏微分&#xff0c;梯度下降对参数进行更新 Visualize: 确定梯度方向&…...

MySql003——SQL(结构化查询语言)基础知识

一、数据库的相关概念 DB&#xff1a;数据库&#xff08;Database&#xff09; 即存储数据的“仓库”&#xff0c;其本质是一个文件系统。它保存了一系列有组织的数据。DBMS&#xff1a;数据库管理系统&#xff08;Database Management System&#xff09; 是一种操纵和管理数…...

springCloud Eureka注册中心配置详解

1、创建一个springBoot项目 2、在springBoot项目中添加SpringCloud依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>2021.0.3</version><type>…...

gti 远程操作

目录 一. 分布式版本控制管理系统 1. 理解分布式版本控制管理系统 二. 创建远程仓库 ​编辑 ​编辑 三. 克隆远程仓库_HTTP 四. 克隆远程仓库_SSH 配置公钥 添加公钥 五. git 向远程仓库推送 六. 拉取远程仓库 七. 忽略特殊文件 八. 配置别名 一. 分布式版本控制管理…...

Ftrace

一、概述 Ftrace有剖析器和跟踪器。剖析器提供统计摘要&#xff0c;如激素胡和直方图&#xff1b;而跟踪器提供每一个事件的细节。 Ftrace剖析器列表&#xff1a; 剖析器描述function内核函数统计分析kprobe profiler启用的kprobe计数器uprobe profiler启用的uprobe计数器hi…...

Tomcat修改端口号

网上的教程都比较老&#xff0c;今天用tomcat9.0记录一下 conf文件夹下server.xml文件 刚开始改了打红叉的地方&#xff0c;发现没用&#xff0c;改了上面那行...

vue2企业级项目(一)

vue2企业级项目&#xff08;一&#xff09; 创建项目&#xff0c;并创建项目编译规范 1、node 版本 由于是vue2项目&#xff0c;所以 node 版本比较低。使用 12.18.3 左右即可 2、安装vue 安装指定版本的vue2 npm i -g vue2.7.10 npm i -g vue/cli4.4.63、编辑器规范 vsc…...

【前端知识】React 基础巩固(三十八)——log、thunk、applyMiddleware中间件的核心代码

React 基础巩固(三十八)——log、thunk、applyMiddleware中间件的核心代码 一、打印日志-中间件核心代码 利用Monkey Patching&#xff0c;修改原有的程序逻辑&#xff0c;在调用dispatch的过程中&#xff0c;通过dispatchAndLog实现日志打印功能 // 打印日志-中间件核心代码…...

hive删除数据进行恢复

在实际开发或生产中&#xff0c;hive表如果被误删&#xff0c;如被truncate或是分区表的分区被误删了&#xff0c;只要在回收站的清空周期内&#xff0c;是可以恢复数据的&#xff0c;步骤如下&#xff1a; &#xff08;1&#xff09; 先找到被删除数据的存放目录&#xff0c;…...

二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom

要实现这个效果&#xff0c;我们先看一下目前的页面展示&#xff1a; 左边有一个图例&#xff0c;我们可以方法缩小地图&#xff0c;右边是动态的marker标记&#xff0c;到时候肯定时候是后端将对应的颜色标识、文字展示、坐标点给咱们返回、我们肯定可以拿到一个list&#xf…...

UDF和UDAF、UDTF的区别

UDF UDF&#xff08;User-defined functions&#xff09;用户自定义函数&#xff0c;简单说就是输入一行输出一行的自定义算子。 是大多数 SQL 环境的关键特性&#xff0c;用于扩展系统的内置功能。&#xff08;一对一&#xff09; UDAF UDAF&#xff08;User Defined Aggregat…...

小研究 - 浅析 JVM 中 GC 回收算法与垃圾收集器

本文主要介绍了JVM虚拟机中非常重要的两个部分&#xff0c;GC 回收算法和垃圾收集器。从可回收对象的标记开始&#xff0c;详细介绍 了四个主流的GC算法&#xff0c;详细总结了各自的算法思路及优缺点&#xff0c; 提出了何种情况下应该通常选用哪种算法。 目录 1 标记可回收对…...

Flowable-服务-骆驼任务

目录 定义图形标记XML内容Flowable与Camel集成使用示例设计Came路由代码 定义 Camel 任务不是 BPMN 2.0 规范定义的官方任务&#xff0c;在 Flowable 中&#xff0c;Camel 任务是作为一种特殊的服务 任务来实现的。主要做路由工作的。 图形标记 由于 Camel 任务不是 BPMN 2.…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...