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

html写一个向flask_socketio发送消息和接收消息并显示在页面上

news 文章来源：https://blog.csdn.net/h1773655323/article/details/132424363 2024/9/22 17:34:17

以下是一个简单的HTML页面，它包含一个输入框、一个发送按钮和一个显示区域。用户可以在输入框中输入消息，点击发送按钮，然后这个消息会被发送到 Flask-SocketIO 服务器。当服务器回应消息时，它会在页面的显示区域显示出来。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flask-SocketIO Chat</title><!-- Import the Socket.IO client library --><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script><script type="text/javascript">document.addEventListener("DOMContentLoaded", function() {const socket = io.connect('http://localhost:5000');const messagesDiv = document.getElementById('messages');const inputElem = document.getElementById('messageInput');const buttonElem = document.getElementById('sendButton');// Listen for a 'response' event from the serversocket.on('response', function(msg) {const pElem = document.createElement('p');pElem.innerText = msg.data;messagesDiv.appendChild(pElem);});// Send the input message to the server on button clickbuttonElem.addEventListener('click', function() {const message = inputElem.value;socket.emit('send_message', {data: message});inputElem.value = ''; // Clear the input});});</script>
</head>
<body><h1>Flask-SocketIO Chat</h1><input type="text" id="messageInput" placeholder="Type your message here..."><button id="sendButton">Send</button><div id="messages"></div>
</body>
</html>

此外，Flask-SocketIO 服务器端代码可以处理客户端发送的 send_message 事件，并返回一个 response 事件。例如：

from flask import Flask
from flask_socketio import SocketIOapp = Flask(__name__)
socketio = SocketIO(app)@socketio.on('send_message')
def handle_message(message):print('Received message:', message['data'])socketio.emit('response', {'data': 'Server received: ' + message['data']})if __name__ == '__main__':socketio.run(app, debug=True)

当用户在HTML页面上输入消息并点击发送按钮时，消息会被发送到 Flask-SocketIO 服务器。服务器接收到消息后，会发送一个回应，该回应将在页面上显示。

相关文章：

html写一个向flask_socketio发送消息和接收消息并显示在页面上

以下是一个简单的HTML页面&#xff0c;它包含一个输入框、一个发送按钮和一个显示区域。用户可以在输入框中输入消息&#xff0c;点击发送按钮&#xff0c;然后这个消息会被发送到 Flask-SocketIO 服务器。当服务器回应消息时&#xff0c;它会在页面的显示区域显示出来。 <…...

编程日记 2023/8/25 22:51:40

C#使用.Net Core进行跨平台开发

使用 .NET Core 进行跨平台开发是一种灵活的方法&#xff0c;可以在多个操作系统上运行 C# 应用程序。以下是在 C# 中使用 .NET Core 进行跨平台开发的一般步骤&#xff1a; 安装 .NET Core SDK&#xff1a; 在开始之前&#xff0c;需要安装适用于操作系统的 .NET Core SDK。可…...

编程日记 2023/8/25 22:50:38

Java“牵手”天猫店铺所有商品API接口数据，通过店铺ID获取整店商品详情数据，天猫API申请指南

天猫商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。天猫商品详情可以帮助消费者更好的了解宝贝信息&#xff0c;从而做出购买决策。同时&#xff0c;消费者也可以通过商品详情了解其他买家对宝贝的评价&#xf…...

编程日记 2023/8/25 22:49:37

php输入post过滤函数，入库出库，显示

第一部分 php输入post过滤函数 function GLOBAL_POST($str) {$str_origin$str; if (empty($str)) return false;$str str_replace( /, "", $str);//替换关键词 $str str_replace("\\", "", $str); $str str_replace("&gt", &…...

编程日记 2023/8/25 22:48:34

matlab-对数据集加噪声并实现tsne可视化

matlab-对数据集加噪声并实现tsne可视化 最近才知道&#xff0c;原来可以不用模型&#xff0c;也能实现对数据集数据的可视化。 **一、**以COIL-100数据集为例子。 问题&#xff1a; 前提&#xff1a;首先对COIL-100数据集根据角度0-175和180-255&#xff0c;分别划分成C1,C…...

编程日记 2023/8/25 22:47:32

【BASH】回顾与知识点梳理（三十八）

【BASH】回顾与知识点梳理 三十八 三十八. 源码概念及简单编译38.1 开放源码的软件安装与升级简介什么是开放源码、编译程序与可执行文件什么是函式库什么是 make 与 configure什么是 Tarball 的软件如何安装与升级软件 38.2 使用传统程序语言进行编译的简单范例单一程序&#…...

编程日记 2023/8/25 22:46:32

Sql注入攻击的三种方式

SQL注入是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步得到相应的数据信息。SQL 注…...

编程日记 2023/8/25 22:45:30

dockerfile部署前端vue打包的dist文件实战

背景&#xff1a;一般前端开发后会将打包后的dist文件交由我们部署&#xff0c;部署的方式有很多&#xff0c;这里提供一种思路 在服务器的路径下新建一个目录&#xff0c;在目录中新建Dockerfile&#xff0c;编辑这个文件 FROM nginxCOPY ./dist /home/front COPY nginx.con…...

编程日记 2023/8/25 22:44:28

[技术杂谈]MobaXterm中文乱码编码问题一种解决方法

今日使用mobaxterm连接树莓派发现安装出现乱码&#xff0c;看不清文字是什么。最最简单方式是ssh设置终端字体&#xff0c;具体步骤为&#xff1a; 1. 右键会话&#xff0c;点击编辑会话 2.在以下画面点击终端字体设置 3.选择编码&#xff1a;GBK或者ISO-8859-1...

编程日记 2023/8/25 22:43:26

mac os M1 安装并启动 postgreSQL 的问题

Homebrew 安装 postgreSQL brew install postgresql启动 brew services start postgresql但报错&#xff1a; uninitialized constant Homebrew::Service::System解决方案 brew doctor按照 brew doctor 中的建议进行操作&#xff0c;如果不行&#xff0c;如下&#xff1a; h…...

编程日记 2023/8/25 22:42:23

如何使用Wireshark进行网络流量分析？

如何使用Wireshark进行网络流量分析。Wireshark是一款强大的网络协议分析工具&#xff0c;可以帮助我们深入了解网络通信和数据流动。 1. 什么是Wireshark&#xff1f; Wireshark是一个开源的网络协议分析工具&#xff0c;它可以捕获并分析网络数据包&#xff0c;帮助用户深入…...

编程日记 2023/8/25 22:41:22

抖音web主页视频爬虫

需要抖音主页视频爬虫源码的发私信&#xff0c;小偿即可获得长期有效的采集程序。 比构造 s_v_web_id 验证滑块的方法更快&#xff0c;更稳定。...

编程日记 2023/8/25 22:40:20

常用的jar包【maven坐标格式】

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f3e8;mysql加载启动项jar包&#x1f993;mybatis加载启动项jar包 &#x1f412;个人主页 &#x1f3c5;JavaEE系列专栏 &#x1f4d6;前言&#xff1a; 本篇博客主要以介绍常…...

编程日记 2023/8/25 22:39:19

【分布式】VMware FT概要

讨论了1primary 1backup的情况&#xff0c;比较好理解&#xff0c; 6.824中以该论文为例&#xff0c;介绍了分布式系统中复制的概念&#xff0c;复制的方式。以下简要讲述一些关键点&#xff0c;来源于MIT6.824课程&#xff0c;翻译版本 https://mit-public-courses-cn-transl…...

编程日记 2023/8/25 22:38:16

江西南昌电气机械三维测量仪机械零件3d扫描-CASAIM中科广电

精密机械零部件是指机械设备中起到特定功能的零件&#xff0c;其制造精度要求非常高。这些零部件通常由金属、塑料或陶瓷等材料制成&#xff0c;常见的精密机械零部件包括齿轮、轴承、螺丝、活塞、阀门等。精密机械零部件的制造需要高精度的加工设备和工艺&#xff0c;以确保其…...

编程日记 2023/8/25 22:37:11

MySQL三大日志(binlog、redo log和undo log)详解

1.redo log redo log是InnoDB存储引擎层的日志&#xff0c;又称重做日志文件。 用于记录事务操作的变化&#xff0c;记录的是数据修改之后的值&#xff0c;不管事务是否提交都会记录下来 redo log包括两部分&#xff1a;一个是内存中的日志缓冲(redo log buffer)&#xff0c;另…...

编程日记 2023/8/25 22:36:09

七大排序算法详解

1.概念 1.排序的稳定性 常见的稳定的排序有三种&#xff1a;直接插入排序&#xff0c;冒泡排序&#xff0c;归并排序 对于一组数据元素排列&#xff0c;使用某种排序算法对它进行排序&#xff0c;若相同数据之间的前后位置排序后和未排序之前是相同的&#xff0c;我们就成这种…...

编程日记 2023/8/25 22:35:07

[docker][WARNING]: Empty continuation line found in:

报警内容&#xff1a; 下面展示一些 内联代码片。 //执行 sudo docker build ubuntu:v1.00 . [WARNING]: Empty continuation line found in:出现上述错误原因为18行多了一个 " \" 符号&#xff0c;去除即可...

编程日记 2023/8/25 22:34:05

探工业互联网的下一站！腾讯云助力智造升级

引言 数字化浪潮正深刻影响着传统工业形态。作为第四次工业革命的重要基石&#xff0c;工业互联网凭借其独特的价值快速崛起&#xff0c;引领和推动着产业变革方向。面对数字化时代给产业带来的机遇与挑战&#xff0c;如何推动工业互联网的规模化落地&#xff0c;加速数字经济…...

编程日记 2023/8/25 22:33:03

SpringBoot上传文件的实现与优化

一、什么是文件上传&#xff1f; 文件上传是指客户端将本地的文件通过HTTP协议发送到服务器端的过程。文件上传是Web开发中常见的功能之一&#xff0c;例如用户可以上传头像、照片、视频、文档等各种类型的文件。文件上传涉及到客户端和服务器端的交互&#xff0c;需要考虑文件…...

编程日记 2023/8/25 22:32:02

学习python可以做什么？有前景么

Python被热门领域广泛应用 学习者就业优势明显&#xff01; 说到Python的优势&#xff0c;就不得不提这句玩笑话&#xff1a;Python除了不会生孩子&#xff0c;其他的都会。 Web开发、网络爬虫、数据分析、人工智能、自动化、云计算、网络编程、游戏开发等领域&#xff0c;统…...

编程日记 2023/8/25 22:31:01

还不知道怎么提示LLM？ChatGPT提示入门

文章目录 简介&#xff1a;什么是人工智能&#xff1f;什么是提示过程&#xff1f;为什么会出现这样的差异&#xff1f; 为什么需要提示过程&#xff1f;1) 文章摘要2) 数学问题求解 如何进行提示过程&#xff1f;角色提示&#xff1a;多范例提示&#xff1a;无范例提示单范例提…...

编程日记 2023/8/25 22:30:00

反射机制-体会反射的动态性案例（尚硅谷Java学习笔记）

// 举例01 public class Reflect{ // 静态性 public Person getInstance(){return new Person(); }// 动态性 public T<T> getInstance(String className) throws Exception{Calss clzz Class.forName(className);Constructor con class.getDeclaredConstructor();con…...

编程日记 2023/8/25 22:28:58

uniapp离线打包apk - Android Studio

uniapp 离线打包 基于uni-app的andiord 离线打包 开发工具及所需要的jar包​1.将下载的App离线SDK解压打开&#xff0c;找到HBuilder-Integrate-AS &#xff0c;在Android Studio打开2.打开HBuilder X&#xff0c;发行->原生app本地打包->生成本地打包app资源3.在“HBuil…...

编程日记 2023/8/25 22:27:58

cuda面试准备（一），架构调试

1 cuda架构 硬件方面 SP (streaming Process) ，SM (streaming multiprocessor) 是硬件(GPUhardware) 概念。而thread，block，grid，warp是软件上的(CUDA) 概念 SP:最基本的处理单元，streaming processor,也称为CUDA core，最后具体的指令和任务都是在SP上处理的。GPU进行并行…...

编程日记 2023/8/25 22:26:56

docker containers logs清理

容器的磁盘占用 每次创建一个容器时&#xff0c;都会有一些文件和目录被创建&#xff0c;例如&#xff1a; /var/lib/docker/containers/ID目录&#xff0c;如果容器使用了默认的日志模式&#xff0c;他的所有日志都会以JSON形式保存到此目录下。 /var/lib/docker/overlay2 目…...

编程日记 2023/8/25 22:25:54

Ubuntu安装RabbitMQ

一、安装 更新系统软件包列表&#xff1a; sudo apt update安装RabbitMQ的依赖组件和GPG密钥&#xff1a; sudo apt install -y curl gnupg curl -fsSL https://github.com/rabbitmq/signing-keys/releases/download/2.0/rabbitmq-release-signing-key.asc | sudo gpg --dearmo…...

编程日记 2023/8/25 22:24:53

Vue3获取当前环境信息

获取.env.development和.env.production内的信息及环境信息 在业务逻辑文件中可以通过 import.meta.env的方式获取&#xff0c;例如&#xff1a; const { MODE, VITE_APP_BASE_API} import.meta.env在vite.config.js中获取&#xff1a; import { defineConfig, loadEnv } f…...

编程日记 2023/8/25 22:23:51

Linux 系统 diff 文件比较命令详解

diff 命令用于比较两个文件或目录之间的差异。它会逐行比较文件的内容&#xff0c;并且在不同的行上显示不同之处。下面是 diff 命令的使用方法和选项&#xff1a; 基本语法&#xff1a; diff [选项] 文件1 文件2常见选项&#xff1a; -c 或 --context&#xff1a;显示上下文…...

编程日记 2023/8/25 22:22:49

【负载均衡】Nacos简单入门

Nacos简单入门 快速安装 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; 下载完压缩包之后&#xff0c;放在任意目录下面进行解压&#xff1a; GitHub主页&#xff1a;https://github.com/alibaba/nacos G…...

编程日记 2023/8/25 22:21:48

实验一 ubuntu 网络环境配置

ubuntu 网络环境配置 【实验目的】 掌握 ubuntu 下网络配置的基本方法&#xff0c;能够通过有线网络连通 ubuntu 和开发板 【实验环境】 ubuntu 14.04 发行版FS4412 实验平台 【注意事项】 实验步骤中以“$”开头的命令表示在 ubuntu 环境下执行&#xff0c;以“#”开头的…...

编程日记 2023/8/25 22:20:47

ubuntu can应用开发环境搭建指南

sudo apt-get update sudo apt-get install can-utils libsocketcan-dev can数据发送这个采用来自网上的一段代码进行测试： can_send.c代码内容如下： /* 1. 报文发送程序 */ #include <stdio.h> #include <stdlib.h> #include <string.h> #include <…...

编程日记 2023/8/25 22:19:46

全流程R语言Meta分析核心技术高阶应用

查看原文>>>全流程R语言Meta分析核心技术高阶应用 目录 专题一、Meta分析的选题与检索 专题二、Meta分析与R语言数据清洗及统计方法 专题三、R语言Meta分析与作图 专题四、R语言Meta回归分析 专题五、R语言Meta诊断分析 专题六、R语言Meta分析的不确定性 专题…...

编程日记 2023/8/25 22:18:45

windows下安装使用git-lfs克隆大文件

下载安装git-lfs工具 首先去git-lfs这里&#xff0c;下载相应平台的工具&#xff0c;我下载的windows版本&#xff0c;非安装版本&#xff0c;直接配置到系统环境变量里 执行以下命令验证是否成功 git lfs install 克隆数据集 这样自动会下载里边的大文件 git clone https:/…...

编程日记 2023/8/25 22:17:44

Node.js下载安装及环境配置教程

一、进入官网地址下载安装包 https://nodejs.org/zh-cn/download/ 选择对应你系统的Node.js版本&#xff0c;这里我选择的是Windows系统、64位 Tips&#xff1a;如果想下载指定版本&#xff0c;点击【以往的版本】&#xff0c;即可选择自己想要的版本下载 二、安装程序 &a…...

编程日记 2023/8/25 22:16:43

半导体低压热氧工艺中的真空度精密控制解决方案

摘要&#xff1a;在目前的各种半导体材料热氧化工艺中&#xff0c;往往需要对正负压力进行准确控制并对温度变化做出快速的响应&#xff0c;为此本文提出了热氧化工艺的正负压力控制解决方案。解决方案的核心是基于动态平衡法分别对进气和排气流量进行快速调节&#xff0c;具体…...

编程日记 2023/8/25 22:15:42

TCP的可靠性之道：确认重传和流量控制

TCP 全称为 Transmission Control Protocol&#xff08;传输控制协议&#xff09;&#xff0c;是一种面向连接的、可靠的、基于字节流的传输层通信协议&#xff0c;其中可靠性是相对于其他传输协议的优势点。TCP 为了确保数据传输的可靠性主要做了以下几点&#xff1a; 发送确…...

编程日记 2023/8/25 22:14:40

基于spring boot校园疫情信息管理系统/疫情管理系统

摘要 随着计算机技术&#xff0c;网络技术的迅猛发展&#xff0c;Internet 的不断普及&#xff0c;网络在各个领域里发挥了越来越重要的作用。特别是随着近年人民生活水平不断提高&#xff0c;校园疫情信息管理系统给学校带来了更大的帮助。 由于当前疫情防控形势复杂&#xff…...

编程日记 2023/8/25 22:13:39

使用Python批量将飞书文档转为MD

说明&#xff1a;飞书是在线文档平台&#xff0c;本文介绍如何使用Python程序批量将飞书文档转为MD文档&#xff0c;并下载到本地&#xff1b; 复制地址 首先&#xff0c;把文档的URL都复制下来&#xff0c;这个需要一个一个点&#xff0c;并复制拷贝&#xff0c;但却是工作量…...

编程日记 2023/8/25 22:12:37

Nacos配置管理、Feign远程调用、Gateway服务网关

1.Nacos配置管理 1.1.将配置交给Nacos管理的步骤 1.在Nacos中添加配置 Data Id服务名称-环境名称.yaml eg&#xff1a;userservice-dev.yaml 2.引入nacos-config依赖 在user-service服务中&#xff0c;引入nacos-config的客户端依赖 <!--nacos配置管理依赖--> <dep…...

编程日记 2023/8/25 22:11:36

解决Spring Boot前后端分离开发模式中的跨域问题

在实际开发中&#xff0c;经常会遇到前端Vue应用与后端Spring Boot API接口存在跨域访问的问题。本篇博客将分享解决Spring Boot前端Vue跨域问题的实战经验&#xff0c;帮助开发者快速解决该问题。 一、跨域问题的原因 跨域问题是由于浏览器的同源策略引起的。同源策略限制了…...

编程日记 2023/8/25 22:10:34

常见前端面试之VUE面试题汇总五

13. assets 和 static 的区别 相同点&#xff1a; assets 和 static 两个都是存放静态资源文件。项目中所 需要的资源文件图片&#xff0c;字体图标&#xff0c;样式文件等都可以放在这两个文件 下&#xff0c;这是相同点 不相同点&#xff1a;assets 中存放的静态资源文件在…...

编程日记 2023/8/25 22:09:31

带着问题看SpringBoot

带着问题看SpringBoot 1、Spring容器具体是什么&#xff1f; 跟进run方法&#xff0c;context this.createApplicationContext()&#xff0c;得出容器是AnnotationConfigServletWebServerApplicationContext类。 SpringApplication.run(ServeroneApplication.class, args);…...

编程日记 2023/8/25 22:08:29

【Go 基础篇】Go语言匿名函数详解：灵活的函数表达式与闭包

介绍 在Go语言中&#xff0c;函数是一等公民&#xff0c;这意味着函数可以像其他类型的值一样被操作、传递和赋值。匿名函数是一种特殊的函数&#xff0c;它没有固定的函数名&#xff0c;可以在代码中被直接定义和使用。匿名函数在Go语言中具有重要的地位&#xff0c;它们常用…...

编程日记 2023/8/25 22:07:27

MobileNet、MobileNetV2和MobileNetV3创新点总结

当谈论MobileNet、MobileNetV2和MobileNetV3时&#xff0c;我们指的是一系列基于深度学习的轻量级神经网络架构&#xff0c;这些架构旨在在保持高度准确性的同时减少模型的计算和参数量。以下是它们各自的创新点的详细总结&#xff1a; MobileNet&#xff1a; 深度可分离卷积&…...

编程日记 2023/8/25 22:06:26

算法：数据转换处理2（云台显控）

#define DISPLAYFUNC #include"define.h" extern OS_EVENT *KEYMsg; uchar mBlank[21] = " " ; u c h a r s t r v g a [ ] = " 0.00 V "; uchar str_vga[] = "0.00V...

编程日记 2023/8/25 22:05:24

让大数据平台数据安全可见-行云管家

数字化经济在快速发展&#xff0c;大数据时代已经到来&#xff0c;大数据已经成为企业和政府决策的重要依据。然而大数据行业快速发展所带来的一系列安全问题也继续解决&#xff0c;例如数据安全更难保障&#xff0c;例如认证体系不完善等等。为此行云管家推出了大数据平台数据…...

编程日记 2023/8/25 22:04:23

微信小程序开发教学系列（3）- 页面设计与布局

3. 页面设计与布局 在微信小程序开发中&#xff0c;页面的设计和布局是非常重要的。一个好的页面设计可以提升用户体验&#xff0c;并使小程序更加吸引人。本章节将介绍如何设计和布局微信小程序的页面。 3.1 页面结构和样式的创建和设置 在创建微信小程序页面时&#xff0c…...

编程日记 2023/8/25 22:03:22

基于JSP+Servlet+mysql员工权限管理系统

基于JSPServletmysql员工权限管理系统 一、系统介绍二、功能展示四、其他系统实现五、获取源码 一、系统介绍 项目类型&#xff1a;Java web项目 项目名称&#xff1a;基于JSPServlet的员工权限管理系统[qxxt] 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 …...

编程日记 2023/8/25 22:02:20

Qt 自定义提示框 右下角冒泡

网页右下角上经常会出现一些提示性的信息&#xff0c;B/S有的东西&#xff0c;C/S当然也可以有&#xff0c;就像QQ的消息提示一样&#xff01; 实现一个类似的东西并不困难&#xff0c;只要想明白原理实现起来就很简单了&#xff01; 实现原理&#xff1a; &#xff08;1&#…...

编程日记 2023/8/25 22:01:18