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

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

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

    先安装依赖：

    pip install flask-sock

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

    sock = Sock(app)

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

    1. sock = Sock()
    2.  
    3. def create_app():
    4.     app = Flask(__name__)
    5.     sock.init_app(app)

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

    1. @sock.route('/echo')
    2. def echo(ws):
    3.     while True:
    4.         data = ws.receive()
    5.         ws.send(data)

    一个完整的例子

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

    1. from flask import Flask, render_template
    2. from flask_sock import Sock
    3.  
    4. app = Flask(__name__)
    5. sock = Sock(app)
    6.  
    7.  
    8. @app.route('/')
    9. def index():
    10.     return "你好，世界"
    11.  
    12.  
    13. @app.route('/ws')
    14. def websocket():
    15.     return """
    16.     
    17.     
    18.       
    19.         Flask-Sock Demo
    20.       
    21.       
    22.         
      Flask-Sock Demo
    23.         
    24.         
    25.         
    26.           
    27.           
    28.         
    29.         
    30.       
    31.     
    32.     """
    33.  
    34.  
    35. @sock.route('/echo')
    36. def echo(self):
    37.     while True:
    38.         data = self.receive()
    39.         self.send(data)
    40.  
    41.  
    42. if __name__ == '__main__':
    43.     app.run(host="0.0.0.0", port=8989)

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

    下面是html 页面内容:

    1. html>
    2. <html>
    3.   <head>
    4.     <title>Flask-Sock Demotitle>
    5.   head>
    6.   <body>
    7.     <h1>Flask-Sock Demoh1>
    8.     <div id="log">div>
    9.     <br>
    10.     <form id="form">
    11.       <label for="text">Input: label>
    12.       <input type="text" id="text" autofocus>
    13.     form>
    14.     <script>
    15.       const log = (text, color) => {
    16.         document.getElementById('log').innerHTML += `${color}">${text}
      `;
    17.       };
    18.  
    19.       const socket = new WebSocket('ws://' + location.host + '/echo');
    20.       socket.addEventListener('message', ev => {
    21.         log('<<< ' + ev.data, 'blue');
    22.       });
    23.       document.getElementById('form').onsubmit = ev => {
    24.         ev.preventDefault();
    25.         const textField = document.getElementById('text');
    26.         log('>>> ' + textField.value, 'red');
    27.         socket.send(textField.value);
    28.         textField.value = '';
    29.       };
    30.     script>
    31.   body>
    32. html>

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

    你就能看到一个这样的页面： 并且会默认创建一个websocket链接

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

     

  • 相关阅读:
    论文阅读 基于机器学习文本处理的PHP和JSP Web shell检测系统（上海交大）
    SpringBoot SpringBoot 原理篇 1 自动配置 1.15 自动配置原理【1】
    核心交换机、汇聚交换机、接入交换机的概念
    【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行
    【会员管理系统】篇二之项目搭建、初始化、安装第三方库
    sqlite3简单使用
    基于STM32的智能家居控制系统设计与实现(带红外遥控控制空调)
    蓝桥杯决赛PREV-392试题3：信用卡号的验证（第一届）
    生产者消费者模型
    【医学影像处理】基于MRIcron的dcm2nii批量dcm转nii格式
  • 原文地址：https://blog.csdn.net/weixin_44786530/article/details/133041754