processing：使用processing.net向flask发送请求并接收响应

1、processing.net.*的使用

Network Library使在互联网上跨机器读写数据成为可能，它允许在processing中创建客户端和服务器，客户端能够读取数据并将数据写入服务器

Client

客户端连接到服务器并来回发送数据，如果连接出现问题，则会引发异常

import processing.net.*; 

Client client; 
int data; 
 
void setup() { 
  size(200, 200); 
  // Connect to the local machine at port 1252.
  // This example will not run if you haven't
  // previously started a server on this port.
  client= new Client(this, "127.0.0.1", 1252); 
} 
 
void draw() { 
  if (myClient.available() > 0) { 
    data = client.read(); 
    println(data);
  } 
} 

Constructors：Client(parent, host, port)
Parameters：
-parent：通常使用"this"
-host：服务器地址
-port：从服务器上读取/写入的端口

methods

available()

返回可用的字节数，当任何客户端都有来自服务器的可用字节时，它会返回字节数

write()

将数据写入构造客户端时指定的服务器，或将数据写入从server available()方法获得的特定客户端。

// 2A: 共享绘图画布 (服务器)
import processing.net.*;
Server s; 
Client c;
String input;
int data[];
void setup() { 
  size(450, 255);
  background(204);
  stroke(0);
  frameRate(5); // 慢下来一点
  s = new Server(this, 12345);  // 在端口上启动简单服务器
} 
void draw() { 
  if (mousePressed == true) {
    // 划清界限
    stroke(255);
    line(pmouseX, pmouseY, mouseX, mouseY); 
    // 将鼠标坐标发送给其他人
    s.write(pmouseX + " " + pmouseY + " " + mouseX + " " + mouseY + "\n");
  }
  
  // 从客户端接收数据
  c = s.available();
  if (c != null) {
    input = c.readString(); 
    input = input.substring(0, input.indexOf("\n"));  // 只换行符
    data = int(split(input, ' '));  // 将值拆分为数组
    // 使用接收坐标绘制直线
    stroke(0);
    line(data[0], data[1], data[2], data[3]); 
  }
}

// 2B: 共享绘图画布 (客户端)
import processing.net.*; 
Client c; 
String input;
int data[]; 
void setup() { 
  size(450, 255); 
  background(204);
  stroke(0);
  frameRate(5); // 慢下来一点
  // 连接到服务器的 ip地址和端口
  c = new Client(this, "127.0.0.1", 12345); //替换为服务器的 IP 和端口
} 
void draw() {         
  if (mousePressed == true) {
    // 划清界限
    stroke(255);
    line(pmouseX, pmouseY, mouseX, mouseY); 
    // 将鼠标坐标发送给其他人
    c.write(pmouseX + " " + pmouseY + " " + mouseX + " " + mouseY + "\n");
  }
  //从服务器接收数据
  if (c.available() > 0) { 
    input = c.readString(); 
    input = input.substring(0,input.indexOf("\n"));  // 只换行符
    data = int(split(input, ' '));  // 将值拆分为数组
    // 使用接收坐标绘制直线
    stroke(0);
    line(data[0], data[1], data[2], data[3]); 
  } 
}

readString()

以字符串形式返回缓冲区中的所有数据

stop()

断开与服务器的连接，用于在完成客户端操作后关闭连接

2、python flask的使用

请参考以下三篇文章：
1、Flask入门（一）：https://blog.csdn.net/julac/article/details/121257519?spm=1001.2014.3001.5502
2、Flask入门（二）模板：https://blog.csdn.net/julac/article/details/121267284?spm=1001.2014.3001.5502
3、flask入门（三）静态文件：https://blog.csdn.net/julac/article/details/121270106?spm=1001.2014.3001.5502

3、request headers的常见字段

HTTP请求头第一行

在HTTP请求中，第一行必须是一个请求行(request line)，用来说明请求类型、要访问的资源以及使用的HTTP版本

举个例子，假设在浏览器中输入http://example.com/ajax并访问，那么浏览器会发送一个GET /ajax HTTP/1.1的HTTP请求给example.com服务器的/ajax路径，服务器接收到请求后，会寻找对应的资源或处理程序，并将响应内容返回给浏览器，浏览器根据响应内容渲染页面或执行相应的操作。

Content-Type

Content-Type: application/x-www-form-urlencoded 是HTTP请求头中的一个字段，用于指示请求体中的数据编码格式，将表单数据按照 URL 编码规则进行编码。它通常用于POST请求或PUT请求中，用于传递表单数据给服务器。
在这种编码方式下，请求体数据被格式化成 key1=value1&key2=value2... 的形式，其中键值对之间使用 & 进行连接，键和值之间使用 = 进行连接。例如，一个简单的表单数据编码后的数据可能如下所示：

[email protected]

在这个例子中，有三个键值对，分别是 name、age 和 email，对应的值分别是 John Doe、30 和 [email protected]。注意，空格被编码成 +，特殊字符（如空格、&、=等）被进行了 URL 编码

Host

在HTTP请求中，请求头包含了一些键值对，用于描述请求的各种属性。其中 Host 是一个必需的请求头字段，在客户端向服务器发送请求时必须包含。
当客户端发送一个HTTP请求时，它需要知道请求要连接的服务器的位置，也就是请求的目标。Host 请求头字段告诉服务器请求的目标是哪个主机。服务器会根据 Host 字段中指定的主机名或IP地址，找到对应的资源或处理程序，并处理请求。

Content-Length

Content-Length 是HTTP请求头或响应头的一部分，用于指示请求体或响应体的长度，以字节为单位。
在HTTP请求中，当客户端向服务器发送带有请求体（例如POST请求）的请求时，可以使用 Content-Length 请求头字段来指示请求体的长度。服务器可以根据这个字段的值来准确地读取请求体，并确保接收完整的请求数据。
在HTTP响应中，当服务器向客户端返回带有响应体的响应时，可以使用 Content-Length 响应头字段来指示响应体的长度。客户端可以根据这个字段的值来准确地读取响应体，并确保接收完整的响应数据。
Content-Length 字段的值是一个十进制整数，表示请求体或响应体的长度（以字节为单位）。例如，Content-Length: 1024 表示请求体或响应体的长度为1024字节。
在HTTP协议中，Content-Length 字段通常用于在请求和响应中确定消息体的大小，这对于在网络中准确传输数据非常重要。服务器和客户端都依靠这个字段来确保请求和响应的完整性和正确性。

4、实战

python flask服务器：

from flask import Flask, jsonify,request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)


@app.route("/ajax")
def ajax_test():
    print(request.form.get("name"))
    message = {
        "content": "hello world"
    }

    return jsonify(message)


if __name__ == "__main__":
    app.run(port=1252)

processing客户端：

import processing.net.*;

Client client;
String serverIP = "127.0.0.1";
int serverPort = 1252;

void setup() {
  size(400, 200);
  client = new Client(this, serverIP, serverPort);
  
  // 向Flask发送GET请求
  //String dataToSend = "Hello, Flask!";
  String dataToSend = "name=" + urlEncode("John Doe") + "&age=" + urlEncode("30") + "&email=" + urlEncode("[email protected]");
  client.write("GET /ajax HTTP/1.1\r\n");
  client.write("Host: " + serverIP + "\r\n");
  client.write("Content-Type: application/x-www-form-urlencoded\r\n");
  client.write("Content-Length: " + dataToSend.length() + "\r\n");
  client.write("\r\n");
  client.write(dataToSend);
}

void draw() {
  // 检查是否有响应
  if (client.available() > 0) {
    // 读取响应
    String response = client.readString();
    println("Received response: \n" + response);
    // 关闭连接
    client.stop();
  }
}

具体代码请参考：
processing-flask：https://github.com/Charles-yueyue831/processing-flask

参考文献

1、network：https://processing.org/reference/libraries/net/index.html
2、ChatGPT
3、HTTP 请求头字段大全| HTTP Request Headers：https://www.flysnow.org/tools/table/http-request-headers/
4、【20】processing-通讯（中文）：https://blog.csdn.net/zd623949282/article/details/107346164/