树莓派与Flask项目通信【一对一】（一）

玩硬件的小码农

已于 2024-01-07 13:12:00 修改

阅读量561

点赞数 9

分类专栏：树莓派 Linux 文章标签： flask python 嵌入式硬件

于 2023-12-26 14:44:26 首次发布

本文链接：https://blog.csdn.net/Azheyangba/article/details/135221788

版权

Linux 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

树莓派

7 篇文章 0 订阅

订阅专栏

树莓派与flask项目传输数据

1防火墙设置

首先打开防火墙

点击左侧
关闭防火墙

2.flask端口放行

本项目所使用的端口是5000

点击防火墙左侧的高级设置
点击入站规则右键新建规则选择端口
进行选择TCP，填写端口
点击下一步，进行给自己的端口服务起一个名字，最后结束

3.Flask项目设置

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

这两个都要设置host，缺一不可

4.客户端代码

from flask import Flask, render_template, request, jsonify
import base64

app = Flask(__name__)

# 存储接收的数据
received_images = [" "]
received_texts = [" "]

@app.route('/', methods=['GET'])
def index():
    # 显示接收到的图片和文本
    return render_template('clickindex.html', images=received_images, texts=received_texts)


@app.route('/upload-image', methods=['POST'])
def upload_image():
    # 接收并存储图片
    image = request.files['image']
    image_string = base64.b64encode(image.read()).decode('utf-8')
    received_images[0]=(f'data:image/png;base64,{image_string}')

    return jsonify({'status': 'successupload_image'})

@app.route('/send-text', methods=['POST'])
def send_text():
    # 接收并存储文本
    text = request.form['text']
    received_texts[0]=(text)
    print(received_texts)
    return jsonify({'status': 'success'})

@app.route('/get-updates', methods=['GET'])
def get_updates():
    # 发送存储的图片和文本
    return jsonify({'images': received_images, 'texts': str(received_texts)})

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

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Image and Text Display</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .info-box {
            width: 200px;
            height: 200px;
            background-color: #ddd;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="image-box" class="info-box"></div>
    <div id="text-box" class="info-box"></div>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="modal-content"></div>
        </div>
    </div>

    <script>
        var modalIsOpen = false;

        function showModal() {
            $('#myModal').show();
            modalIsOpen = true;
            updateModalContent();
        }

        function hideModal() {
            $('#myModal').hide();
            modalIsOpen = false;
        }

        function updateContent() {
            $.ajax({
                url: '/get-updates',
                type: 'GET',
                success: function(response) {
                    var imageContent = response.images.length > 0 ? '<img src="' + response.images + '" alt="Received image">' : '';
                    var textContent = response.texts.length > 0 ? '<p>' + response.texts+ '</p>' : '';

                    if (modalIsOpen) {
                        $('#modal-content').html(imageContent + textContent);
                    }
                }
            });
        }

        function updateModalContent() {
            if (modalIsOpen) {
                updateContent();
            }
        }

        $('.info-box').click(function() {
            showModal();
        });

        $('.close').click(function() {
            hideModal();
        });

        window.onclick = function(event) {
            if (event.target === $('#myModal')[0]) {
                hideModal();
            }
        }

        // 定时更新内容，无论模态窗口是否打开
        setInterval(updateContent, 500); // 每2秒更新一次

    </script>
</body>
</html>

5. 服务段代码

import requests

def send_text(text, url):
    response = requests.post(url, data={'text': text})
    print(f'Status: {response.status_code}, Response: {response.text}')

# 模拟发送文本
i=0
while True :

    i+=1
    send_text(f'Hello {i} from Server 2!', 'http://localhost:5000/send-text')
    # time.sleep(1)