首页 > 其他分享 >Flask + SocketIO实现简易实时在线聊天室

Flask + SocketIO实现简易实时在线聊天室

时间:2023-12-15 15:13:28浏览次数:26  
标签:__ 聊天室 SocketIO Flask app msg message

下面是一个简单的示例,演示了使用 Python(使用 Flask 框架)作为服务端,以及 HTML、JavaScript 和 Socket.io 作为前端,实现一个简单的实时聊天室。

首先,确保你已经安装了 Flask 和 Flask-SocketIO:

pip install Flask Flask-SocketIO

然后,创建一个名为 app.py 的 Python 文件:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('message')
def handle_message(msg):
    print('Message:', msg)
    socketio.emit('message', msg)

if __name__ == '__main__':
    socketio.run(app, debug=True)

接下来,创建一个名为 templates 的文件夹,并在其中创建一个名为 index.html 的 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>
    <style>
        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul id="messages"></ul>
    <form id="form" action="">
        <input id="input" autocomplete="off" /><button>Send</button>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
    <script>
        $(document).ready(function () {
            var socket = io();

            $('form').submit(function(){
                socket.emit('message', $('#input').val());
                $('#input').val('');
                return false;
            });

            socket.on('message', function(msg){
                $('#messages').append($('<li>').text(msg));
            });
        });
    </script>
</body>
</html>

在命令行中运行 python app.py 启动应用,然后打开浏览器访问 http://localhost:5000。你应该能够在浏览器中看到一个简单的实时聊天室,可以在多个浏览器窗口中进行实时消息的发送和接收。

标签:__,聊天室,SocketIO,Flask,app,msg,message
From: https://www.cnblogs.com/JentZhang/p/17903407.html

相关文章

  • flask-session
    flask-sessionpyc文件pyc文件是python源文件经过解释器编译为字节码后的文件pyc文件的加载速度更快可以通过反编译工具将pyc文件的字节码转换为py文件源码生成的pyc文件放在__pycache__目录下面flask-sessionflask框架把session存储在客户端flask生成session的过程如下:1......
  • BugKu-Web-Flask_FileUpload(模板注入与文件上传)
    FlaskFlask是一个使用Python编写的轻量级Web应用框架。它是一个微型框架,因为它的核心非常简单,但可以通过扩展来增加其他功能。Flask的核心组件包括Werkzeug,一个WSGI工具箱,以及Jinja2,一个模板引擎。Flask使用BSD授权,这意味着它遵循开源许可证,允许用户自由地使用、修改和分发。Fla......
  • Flask ORM 学习笔记Part09:数据查询(中)
    聚合操作聚合操作是指对一组值进行汇总、计算或统计的操作。这些操作通常应用于数据库中的列(字段),并用于生成单个标量值(例如平均值AVG、总和SUM、最大值MAX、最小值MIN、计数COUNT等)。示例代码fromappimportappfrommodelimport*frompprintimportpprintfromsqlalchemyi......
  • go 聊天室
    main.go1packagemain23import(4"encoding/json"5"fmt"6"net/http"78"github.com/gorilla/websocket"9"github.com/gorilla/mux"10)1112typeDatast......
  • Flask ORM 学习笔记Part09:数据查询(上)
    前面的笔记,从Marshmallow开始就稍微有些跑题,今天记录一下如何使用Flask-SQLAlchemy进行数据查询。查询语法糖在前文中,有定义过一系列的model类,这里一Account类作为示例。fromappimportappfrommodelimport*fromschemaimport*frompprintimportpprint#fromsqlalchem......
  • flask支持Vue2 mode history历史模式
    VueRouter配置在Vue2router里面增加constrouter=newVueRouter({mode:'history',base:'/admin/',//这里路径写你打包后的网址路径routes:[//这里是你的路由配置],});vue.config.js打包配置const{defineConfig}=require('@vue/cli-service......
  • Python+Flask SSTI 注入payload自动生成
    抛开代码丑不谈,用起来还是挺好用滴。fromflaskimportFlask,requestfromjinja2importTemplatefromthreadingimportThreadimportrequestsimportosimportsysurl_dict={"popen":[],"eval":[],"__import__":[],}scan_list......
  • Flask实践--重保时期网页防篡改监测平台
    最近在尝试使用flask编写一个网站防篡改监测平台,目前已基本完成,前端使用光年模板修改,后端主要通过设置相关参数后轮询+正则匹配实现页面监控及篡改监测,简单介绍如下:登录因为是自己用,去掉了图形及花里胡哨的滑块验证码(主要是不会后端校验)而改用OTP码实现双因子,账号密码通过数......
  • 记录springboot的一次使用socketio的经历
    pom中加入依赖<dependency><groupId>com.corundumstudio.socketio</groupId><artifactId>netty-socketio</artifactId><version>2.0.6</version></dependency>......
  • Flask读取MySQL数据库中的图片并返回给前端的步骤?
    要在Flask中读取MySQL数据库中的图片并返回给前端,可以按照以下步骤进行操作:导入相关模块:在Flask应用程序文件中,首先导入必要的模块,包括Flask、MySQL驱动和一些辅助函数。fromflaskimportFlask,request,send_fileimportmysql.connector创建Flask应用程序实例:创建一个Flask应......