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

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

news 2026/3/28 8:09:43

以下是一个简单的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

AI辅助开发：打造你的智能编程技能教练——基于快马平台实践

最近在学编程时&#xff0c;发现一个痛点&#xff1a;遇到问题经常要反复查文档、搜论坛&#xff0c;效率很低。刚好体验了InsCode(快马)平台的AI辅助功能&#xff0c;用它做了个"智能编程教练"的小项目&#xff0c;效果意外地好。分享下具体实现思路和实际体验&…...

编程新知 2026/3/28 7:08:55

从零构建：基于FreeRTOS与LVGL的低功耗智能手表实战指南

1. 项目背景与核心目标 第一次接触智能手表开发是在三年前&#xff0c;当时市面上开源的方案要么功能简陋&#xff0c;要么功耗高得离谱。作为一个嵌入式老鸟&#xff0c;我决定自己动手搞一套真正可用的低功耗方案。经过多次迭代&#xff0c;最终选择了FreeRTOSLVGL这个黄金组…...

编程新知 2026/3/28 7:04:54

别再只用CEC2005了！手把手教你用MATLAB跑通CEC2017测试集（附完整代码）

从CEC2005到CEC2017&#xff1a;MATLAB实战迁移指南与性能优化技巧 当优化算法研究者还在使用CEC2005作为基准测试时&#xff0c;前沿论文早已转向更具挑战性的CEC2017测试集。这个转变不仅仅是数字上的更新&#xff0c;更代表着优化算法评估标准的一次重大飞跃。本文将带你从零…...

编程新知 2026/3/28 5:09:59

突破透明动画性能瓶颈：VAP引擎实现移动端高效视觉体验

突破透明动画性能瓶颈&#xff1a;VAP引擎实现移动端高效视觉体验 【免费下载链接】vap VAP是企鹅电竞开发&#xff0c;用于播放特效动画的实现方案。具有高压缩率、硬件解码等优点。同时支持 iOS,Android,Web 平台。 项目地址: https://gitcode.com/gh_mirrors/va/vap …...

编程新知 2026/3/28 4:52:06

Obsidian-i18n：破解插件语言壁垒的无缝本地化方案——让中文用户零门槛掌控千款插件

Obsidian-i18n&#xff1a;破解插件语言壁垒的无缝本地化方案——让中文用户零门槛掌控千款插件 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n 问题诊断&#xff1a;插件语言障碍如何制约Obsidian用户体验&#xff1f; …...

编程新知 2026/3/28 4:25:59

Vue项目里用Frappe-Gantt 0.6.1做项目管理甘特图，我踩过的坑都在这了

Vue项目中集成Frappe-Gantt的避坑指南与工程化实践 在最近的一个敏捷开发项目中&#xff0c;我们需要为产品团队提供一个直观的任务进度管理工具。经过几轮技术选型&#xff0c;最终选择了Frappe-Gantt 0.6.1作为基础组件。这个选择并非一帆风顺——从最初的简单集成到最终形成…...

编程新知 2026/3/28 4:13:53

QLVideo：macOS视频管理效率提升的完整解决方案

QLVideo&#xff1a;macOS视频管理效率提升的完整解决方案 【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. 项目地址: https://gitcode.com/g…...

编程新知 2026/3/28 4:01:49

vLLM-v0.17.1参数详解：--disable-log-stats与--log-level日志调优

vLLM-v0.17.1参数详解&#xff1a;--disable-log-stats与--log-level日志调优 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;以其出色的吞吐量和易用性著称。这个项目最初由加州大学伯克利分校的天空计算实验室开发&#xff0c;现在…...

编程新知 2026/3/28 2:53:11

低功耗电源开关电路设计与MCU控制实现

1. 经典电源开关电路设计与分析1.1 系统架构概述该电源开关电路采用三级晶体管控制架构&#xff0c;实现以下核心功能&#xff1a;低功耗待机模式&#xff08;静态电流<10μA&#xff09;按键触发启动机制MCU控制的自锁功能软件可控的电源关断系统工作电压为9V输入&#xff…...

编程新知 2026/3/28 2:30:53

阿联酋人工智能大学：AI能在战争迷雾中做出理性判断吗？

这项由阿联酋穆罕默德本扎耶德人工智能大学和美国马里兰大学共同完成的研究发表于2026年3月&#xff0c;论文编号为arXiv:2603.16642v1。有兴趣深入了解的读者可以通过该编号查询完整论文。在人类历史上&#xff0c;预测战争走向一直是个极其困难的任务。就像我们很难在暴风雨中…...

编程新知 2026/3/28 1:35:46