当前位置: 首页 > 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.…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...