用flask框架flask-sock和websocket创建一个自己的聊天界面

这篇具有很好参考价值的文章主要介绍了用flask框架flask-sock和websocket创建一个自己的聊天界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

WebSocket 协议在10年前就已经标准化了(在2011年,你能相信吗?)所以我相信你不需要介绍。但是如果你不熟悉它,WebSocket 是 HTTP 协议的一个扩展,它在客户端和服务器之间提供了一个永久的、双向的通信通道,在这里双方可以实时地发送和接收数据,而不受 HTTP 的请求/响应周期的限制。

如果您正在使用 Flask 2,那么您现在有了一个名为 Flask-Sock 的新扩展,它为您的应用程序提供了现代 WebSocket 支持。在本文中,我将向您展示如何使用这个扩展。

先安装依赖:

pip install flask-sock

扩展通过创建 Sock ()实例添加到 Flask 应用程序中。如果您有一个全局应用程序对象,您可以使用直接初始化方法:

sock = Sock(app)

 如果在工厂函数中创建应用程序实例,那么两步初始化方法也可以工作:

sock = Sock()

def create_app():
    app = Flask(__name__)
    sock.init_app(app)

Sock 实例有一个路由修饰器,它的工作方式与 Flask 的非常相似,但是它添加了 WebSocket 协议握手,这样路由就可以使用 WebSocket 而不是 HTTP。下面是一个简单的服务器,它向客户机发送任何内容都会回显到该服务器:

@sock.route('/echo')
def echo(ws):
    while True:
        data = ws.receive()
        ws.send(data)

一个完整的例子

让我们来看一个完整的例子,下面是 Flask 应用程序的代码:

from flask import Flask, render_template
from flask_sock import Sock

app = Flask(__name__)
sock = Sock(app)


@app.route('/')
def index():
    return "你好,世界"


@app.route('/ws')
def websocket():
    return """
    <!doctype html>
    <html>
      <head>
        <title>Flask-Sock Demo</title>
      </head>
      <body>
        <h1>Flask-Sock Demo</h1>
        <div id="log"></div>
        <br>
        <form id="form">
          <label for="text">Input: </label>
          <input type="text" id="text" autofocus>
        </form>
        <script>
          const log = (text, color) => {
            document.getElementById('log').innerHTML += `<span style="color: ${color}">${text}</span><br>`;
          };
    
          const socket = new WebSocket('ws://' + location.host + '/echo');
          socket.addEventListener('message', ev => {
            log('<<< ' + ev.data, 'blue');
          });
          document.getElementById('form').onsubmit = ev => {
            ev.preventDefault();
            const textField = document.getElementById('text');
            log('>>> ' + textField.value, 'red');
            socket.send(textField.value);
            textField.value = '';
          };
        </script>
      </body>
    </html>
    """


@sock.route('/echo')
def echo(self):
    while True:
        data = self.receive()
        self.send(data)


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=8989)

这基于上面显示的 echo 服务器代码。应用程序有一个url:http://192.168.110.196:8989/ws,它返回客户端页面,还有一个/echo 路由,它实现了 WebSocket 回显端点。

下面是html 页面内容:

<!doctype html>
<html>
  <head>
    <title>Flask-Sock Demo</title>
  </head>
  <body>
    <h1>Flask-Sock Demo</h1>
    <div id="log"></div>
    <br>
    <form id="form">
      <label for="text">Input: </label>
      <input type="text" id="text" autofocus>
    </form>
    <script>
      const log = (text, color) => {
        document.getElementById('log').innerHTML += `<span style="color: ${color}">${text}</span><br>`;
      };

      const socket = new WebSocket('ws://' + location.host + '/echo');
      socket.addEventListener('message', ev => {
        log('<<< ' + ev.data, 'blue');
      });
      document.getElementById('form').onsubmit = ev => {
        ev.preventDefault();
        const textField = document.getElementById('text');
        log('>>> ' + textField.value, 'red');
        socket.send(textField.value);
        textField.value = '';
      };
    </script>
  </body>
</html>

当你访问:http://192.168.110.196:8989/ws

你就能看到一个这样的页面: 并且会默认创建一个websocket链接用flask框架flask-sock和websocket创建一个自己的聊天界面,HTML前端,Python人生,flask,websocket,python

让你输入消息并发送的时候,就能看到效果了:

用flask框架flask-sock和websocket创建一个自己的聊天界面,HTML前端,Python人生,flask,websocket,python 文章来源地址https://www.toymoban.com/news/detail-731804.html

到了这里,关于用flask框架flask-sock和websocket创建一个自己的聊天界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python创建一个简单的flask应用

    下面用python在本地和服务器上分别创建一个简单的flask应用: 1.在pc本地 1)pip flask后创建一个简单的脚本flask_demo.py win+R进入命令行,切换到flask_demo.py的路径,执行 启动应用 如果显示启动失败,可能的原因是: 设置FLASK_APP环境变量:在命令行中输入以下命令,将FLASK_APP环境

    2024年02月05日
    浏览(37)
  • 使用pycharm+flask创建一个html网页

    准备工作:在pycharm中将flask设置为debug模式,点击Flask(app.py),编辑配置,进来后将FLASK_DEBUG的勾打上; 上面的弄好之后,再来看一下Flask目录(如果你要运行本文的代码,目录要和下图的目录一致) 附上3个html的代码 (1)register.html (2)result.html代码 (3)index.html代码 下面

    2024年02月09日
    浏览(46)
  • flask框架-[实现websocket]:将socketio处理函数部分集中管理,使用类的方式来管理,集中管理socketio处理函数

    注意:在flask2.x版本依赖,不再支持flask_script了 flask2.x版本会自动注册 flask run 和flask db 两个命令行命令 1、启动项目 flask run --host 0.0.0.0 --port 9000 2、数据库迁移命令 flask db init flask db migrate flask db upgrade apps         __init__.py  : 创建app应用,各种注册         websocket   

    2024年02月07日
    浏览(49)
  • 从零用python flask框架写一个简易的网站

    要用Python写一个网站,你可以使用Python的Web框架来开发。常见的Python Web框架包括Django、Flask、Bottle等。以下是一个简单的使用Flask框架开发的示例。 在开始开发之前,你需要安装Flask框架。你可以使用以下命令来安装: 在安装完Flask之后,你可以创建一个Flask应用。以下是一个

    2024年02月12日
    浏览(42)
  • Flask 项目怎么配置并创建第一个小项目?附上完成第一个小案例截图

    目录 1. 为什么要学习 flask? 2. flask 是什么? 3. flask 如何使用? 要安装 Flask,可以按照以下步骤进行: 4. 使用流程 4.1. 新建项目 4.1.1. 打开 pycharm,新建项目 4.1.2. 设置目录,并添加环境 4.1.3. 找到之前创建的虚拟环境 4.1.4. 然后点击 OK 4.1.5. 注意,项目目录和环境目录不一样

    2024年01月16日
    浏览(47)
  • 一个简单的Web程序(详解创建一个Flask项目后自带的一个简单的Web程序)

    程序代码截图如下:  在创建 Flask 程序时,通常需要先创建一个应用实例进行应用初始化。 上述代码中,使用 Flask 类创建了一个应用实例 app。 __name__ 参数用于获取当前代码文件的文件名,作为应用实例的名称。 if __name__ == \\\'__main__\\\': app.run(debug=True) 用于启动服务器并运行应

    2024年01月20日
    浏览(49)
  • PHP最简单自定义自己的框架创建目录结构(二)

    1、mvc目录结构   2、目录解释 KJ:项目名称   core:框架核心目录           KJ.php 框架运行入口   index: 框架模块            controller:模块控制器            model:模块模型数据库操作            view:页面显示html   index.php:index模块框架入口 3、index.php框架入口文件引入框

    2024年02月13日
    浏览(60)
  • 【Unity】创建一个自己的AR安卓程序

    Unity版本:2021.3.1f1 LTS 可在此处通过打开Unity Hub下载 安装过程中提示添加模块时,需要选择Android Build Support及其子模块。 zip下载位置在此,点击即可下载。 下载完成解压后,即可通过Hub打开该工程。 具体操作如下: 在Hub中项目栏目的右上角点击打开,也可以点击下拉箭头选

    2023年04月27日
    浏览(49)
  • Vue+Nodejs 使用WebSocket创建一个简易聊天室

    使用vue编写前端页面,nodejs处理服务端消息,WebSocket进行实时通信 1.客户端 2. 服务端 使用的是nodejs

    2024年02月16日
    浏览(44)
  • 【Unity】创建一个自己的AR脸部特效安卓程序

    接着上篇文章的创建一个简单的AR安卓程序,这次来创建一个自己的AR换脸程序。同样使用之前的项目,在Assets的Scene文件夹下使用Ctrl+N新建一个Scene(或者File→New Scene),选择AR场景,点击Create创建: 这样,就可以直接在配置好AR环境的AR Scene中添加自己的模型了,使用Ctrl+

    2024年01月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包