React, JQuery, Flask 를 이용한 중개 통신

Flask를 이용한 통신 중개 서버를 먼저 만든다.

from flask import Flask, jsonify, request
import json
import ssl
app = Flask(__name__)

cam_msg = 'init'

# headers = {'Content-Type': 'application/json'; charset=utf-8'}
# data = {'flags':'data'}
# requests.post('ip_address', headers = headers, data = json.dumps(data))

######## cam_data ########
@app.route("/camera", methods=['POST'])
def receive_cam():
    global cam_msg
    c_msg = request.get_json()
    cam_msg = c_msg['flags']  #cam on : 0 | cam off : 1
    print(type(cam_msg), cam_msg)
    return 'received'

@app.route("/get_camera")
def send_cam():
    global cam_msg
    print(cam_msg)
    return str(cam_msg)
    
######## mic_data ########
@app.route("/mic", methods=['POST'])
def receive_mic():
    global mic_msg
    m_msg = request.get_json()
    mic_msg = m_msg['flags']  #mic on : 0 | cam off : 1
    print(type(mic_msg), mic_msg)
    return 'received'

@app.route("/get_mic")
def send_mic():
    global mic_msg
    print(mic_msg)
    return str(mic_msg)
    
if __name__ == '__main__':
	# https 통신
    ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS)
    ssl_context.load_cert_chain(certfile='cert.pem', keyfile='key.pem')
    app.debug = False
    app.run(host="0.0.0.0", port = 0000, threaded = True, ssl_context=ssl_context)
    
    
    
### Unicode Error

# json.loads()

 

React 내의 통신

## POST

sendcamera = () => {
        Axios({method:"POST",
        url: 'http://personal_server:8888/camera', ## Flask 주소
        data:{'flags': a}
    }).then((res)=> {
        console.log(res);
    }).catch(error=>{
        console.log(error);

    });
    }

## GET

get_camera_using = () => {
        Axios({method:"GET",
        url: 'http://personal_server:8888/get_camera', ## Flask 주소
    }).then((res)=> {
        now_using_camera = res.data
        // check_camera_using = res
        // console.log(check_camera_using)
        // console.log(res.data);

    }).catch(error=>{
        console.log(error);

    });

$.ajax({
          url: "http://personal_address:port",
          method: "GET",
          dataType: "json",
          timeout: 6666,
          success: function(data) {
          intention_num = data
          console.log("intention_num", intention_num)
          }
        })
        
$.ajax({
          url: "https://personal_address:port",
          method: "POST",
          dataType: "json",
          contentType: "application/json",
          timeout: 6666,
          data: jsonData,
          success: function (data) {
          console.log("성공")
          }
        })

 

이렇게하면 React 페이지 안에서 사용되는 변수 a를 Flask 서버에 전송할 수 있다.

 

전송되어진 함수는 Flask서버에 전송되어져 변수로 저장된다.

 

 

axios 통신

this.get_state = function() {

	const url = "http://personal_server:8888/mic"; ## Flask 주소
	axios.get(url)
		.then(function(response) {
			data = response
            // console.log(response)
			// console.log("성공");
		})
		.catch(function(error) {
			// console.log("실패");
		})
	a = data.data
	// console.log(a)
}

this.get_mic = function(){
	const url = "http://personal_server:8888/get_mic"; ## Flask 주소
	axios.post(url, {flags : now_mic_using_check})
		.then(function(response) {
			// console.log(response)
			// console.log("성공");
		})
		.catch(function(error) {
			// console.log("실패");
		})
}

var coming_req = axios.post('https://Personal_address:port/lamp_power',
                    {power:true})
                    .then(res => {
                        console.log('Post Error!');
                    })
                    .catch(error => {
                        console.log('Post Success!');
                    })

let req3 = axios.get('https://Personal_address:port/get_chat_mode')
            .then(res => {
            console.log('statusCode: ${res.statusCode}')
            console.log(res['data'])
            UI_chat_mode.mode = res['data']
            })
            .catch(error => {
            console.error(error)
            })