\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u5c06\u5b66\u4f1a\uff1a<\/p>\n\n\n\n
- \n
- \u5982\u4f55\u7528python\u5b9e\u73b0\u4e00\u4e2awebsocket\u670d\u52a1\u5668<\/li>\n\n\n\n
- \u5982\u4f55\u7528python\u548cjavascript\u5b9e\u73b0json\u5b57\u7b26\u4e32\u7684\u6253\u5305\u548c\u89e3\u6790<\/li>\n\n\n\n
- \u5982\u4f55\u5229\u7528javascript\u5b9e\u73b0\u9875\u9762\u5c40\u90e8\u52a8\u6001\u5237\u65b0<\/li>\n<\/ul>\n\n\n\n
2.\u67b6\u6784<\/h1>\n\n\n\n
\u6574\u4f53\u67b6\u6784\u4ee5\u53ca\u534f\u8bae\u6808\u5982\u4e0b\uff1a<\/p>\n\n\n\n
![\"\"](\"http:\/\/www.wangkaixuan.tech\/wp-content\/uploads\/2023\/12\/image-1024x369.png\")
<\/figure>\n\n\n\n3.\u539f\u7406\u53ca\u4ee3\u7801<\/h1>\n\n\n\n
\u9996\u5148\u662f\u9875\u9762\u90e8\u5206\uff0c\u6211\u4eec\u8bbe\u60f3\u4e2d\u7684\u9875\u9762\u5206\u4e3a\u4e09\u4e2a\u90e8\u5206\uff1a<\/p>\n\n\n\n
![\"\"](\"http:\/\/www.wangkaixuan.tech\/wp-content\/uploads\/2023\/12\/image-1.png\")
<\/figure>\n\n\n\n- \n
- \u7b2c\u4e00\u4e2a\u90e8\u5206\u7528\u6765\u5c55\u793a\u4e00\u4e9b\u5b9e\u65f6\u7684\u4fe1\u606f\uff0c\u53eb\u505aweb_scr(web_screen)<\/li>\n\n\n\n
- \u7b2c\u4e8c\u4e2a\u90e8\u5206\u653e\u7f6e\u4e00\u4e9b\u63a7\u5236led\u706f\u7684\u6309\u94ae\uff0c\u53eb\u505aweb_ctl(web_control)<\/li>\n\n\n\n
- \u7b2c\u4e09\u4e2a\u90e8\u5206\u9632\u6b62\u6307\u4ee4\u6267\u884c\u7684\u65e5\u5fd7\uff0c\u53eb\u505aweb_log<\/li>\n<\/ul>\n\n\n\n
\u6838\u5fc3\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n
<div id=\"web_scr\" class=\"web_scr\"><\/div>\n\n<div id=\"web_ctl\" class=\"web_ctl\">\n <button id=\"btn_led_red_on\">\u6253\u5f00\u7ea2\u706f<\/button>\n <button id=\"btn_led_red_off\">\u5173\u95ed\u7ea2\u706f<\/button>\n <button id=\"btn_led_yellow_on\">\u6253\u5f00\u9ec4\u706f<\/button>\n <button id=\"btn_led_yellow_off\">\u5173\u95ed\u9ec4\u706f<\/button>\n <br>\n <button id=\"btn_led_green_on\">\u6253\u5f00\u7eff\u706f<\/button>\n <button id=\"btn_led_green_off\">\u5173\u95ed\u7eff\u706f<\/button>\n <button id=\"btn_led_blue_on\">\u6253\u5f00\u84dd\u706f<\/button>\n <button id=\"btn_led_blue_off\">\u5173\u95ed\u84dd\u706f<\/button>\n <br>\n <button id=\"btn_led_all_on\">\u6253\u5f00\u5168\u90e8<\/button>\n <button id=\"btn_led_all_off\">\u5173\u95ed\u5168\u90e8<\/button>\n<\/div>\n\n<div id=\"web_log\" class=\"web_log\">\u8fd9\u4e2a\u5730\u65b9\u7528\u6765\u663e\u793a\u65e5\u5fd7<\/div>\n\n<style type=\"text\/css\">\n .web_scr{font-size:20px; height: 200px; width: 600px; background-color: rgb(29, 241, 241);}\n .web_ctl{font-size:20px; height: 100px; width: 600px; background-color: rgb(195, 183, 183);}\n .web_log{font-size:20px; height: 200px; width: 600px; background-color: rgb(138, 233, 233);}\n<\/style><\/code><\/pre>\n\n\n\n\u6574\u4f53\u63a7\u5236\u903b\u8f91\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n
<script>\n if (!window.WebSocket){\n window.alert(\"\u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 WebSocket!\");\n };\n\n var ws_addr = 'ws:\/\/10.42.0.1:8080';\n\n var web_scr = document.getElementById('web_scr');\n\n var web_btn_r_on = document.getElementById('btn_led_red_on')\n var web_btn_y_on = document.getElementById('btn_led_yellow_on')\n var web_btn_g_on = document.getElementById('btn_led_green_on')\n var web_btn_b_on = document.getElementById('btn_led_blue_on')\n\n var web_btn_r_off = document.getElementById('btn_led_red_off')\n var web_btn_y_off = document.getElementById('btn_led_yellow_off')\n var web_btn_g_off = document.getElementById('btn_led_green_off')\n var web_btn_b_off = document.getElementById('btn_led_blue_off')\n\n var web_btn_a_on = document.getElementById('btn_led_all_on')\n var web_btn_a_off = document.getElementById('btn_led_all_off')\n\n var web_led = {\n \"led_r\": \"off\",\n \"led_y\": \"off\",\n \"led_g\": \"off\",\n \"led_b\": \"off\",\n };\n\n var ws = new WebSocket(ws_addr);\n\n \/\/ websocket\u56de\u8c03\u51fd\u6570\n ws.onopen = function () {\n web_log.innerText = '\u8fde\u63a5\u6210\u529f';\n };\n ws.onmessage = function (e) {\n var obj = JSON.parse(e.data);\n var str = \"<table border=\\\"1\\\">\";\n str += \"<tr><td>\u7ea2\u706f\u72b6\u6001<\/td><td>\" + obj.led_r + \"<\/td><\/tr>\";\n str += \"<tr><td>\u9ec4\u706f\u72b6\u6001<\/td><td>\" + obj.led_y + \"<\/td><\/tr>\";\n str += \"<tr><td>\u7eff\u706f\u72b6\u6001<\/td><td>\" + obj.led_g + \"<\/td><\/tr>\";\n str += \"<tr><td>\u84dd\u706f\u72b6\u6001<\/td><td>\" + obj.led_b + \"<\/td><\/tr>\";\n str += \"<\/table>\";\n web_scr.innerHTML = str;\n };\n ws.onclose = function (e) {\n web_log.innerText = '\u8fde\u63a5\u65ad\u5f00' + e.reason;\n };\n ws.onerror = function (e) {\n web_log.innerText = '\u8fde\u63a5\u5931\u8d25';\n };\n\n \/\/ \u6309\u94ae\u70b9\u51fb\u51fd\u6570\n web_btn_r_on.onclick = function(){\n web_led[\"led_r\"] = \"on\";\n ws.send(JSON.stringify(web_led));\n }\n web_btn_y_on.onclick = function(){\n web_led[\"led_y\"] = \"on\";\n ws.send(JSON.stringify(web_led));\n }\n web_btn_g_on.onclick = function(){\n web_led[\"led_g\"] = \"on\";\n ws.send(JSON.stringify(web_led));\n }\n web_btn_b_on.onclick = function(){\n web_led[\"led_b\"] = \"on\";\n ws.send(JSON.stringify(web_led));\n }\n\n web_btn_r_off.onclick = function(){\n web_led[\"led_r\"] = \"off\";\n ws.send(JSON.stringify(web_led));\n }\n web_btn_y_off.onclick = function(){\n web_led[\"led_y\"] = \"off\";\n ws.send(JSON.stringify(web_led));\n }\n web_btn_g_off.onclick = function(){\n web_led[\"led_g\"] = \"off\";\n ws.send(JSON.stringify(web_led));\n }\n web_btn_b_off.onclick = function(){\n web_led[\"led_b\"] = \"off\";\n ws.send(JSON.stringify(web_led));\n }\n\n web_btn_a_on.onclick = function(){\n web_led[\"led_r\"] = \"on\";\n web_led[\"led_y\"] = \"on\";\n web_led[\"led_g\"] = \"on\";\n web_led[\"led_b\"] = \"on\";\n ws.send(JSON.stringify(web_led));\n }\n web_btn_a_off.onclick = function(){\n web_led[\"led_r\"] = \"off\";\n web_led[\"led_y\"] = \"off\";\n web_led[\"led_g\"] = \"off\";\n web_led[\"led_b\"] = \"off\";\n ws.send(JSON.stringify(web_led));\n }\n\n<\/script><\/code><\/pre>\n\n\n\n\u4ee3\u7801\u975e\u5e38\u5730\u663e\u800c\u6613\u89c1\uff0c\u6211\u4eec\u4e0d\u518d\u89e3\u91ca\u4e86\uff08JSON.stringify\u662f\u5c06javascript\u7684\u5bf9\u8c61\u8f6c\u6362\u4e3ajson\u5b57\u7b26\u4e32\u7684\u51fd\u6570\uff0cJSON.parse\u5219\u662f\u505a\u76f8\u53cd\u64cd\u4f5c\u7684\u51fd\u6570\uff09\u3002<\/p>\n\n\n\n
\u670d\u52a1\u7aef\u4e5f\u5f88\u7b80\u5355\uff0c\u76f4\u63a5\u6709\u73b0\u6210\u7684\u5e93\uff0c\u76f4\u63a5\u770b\u4ee3\u7801\u5427\uff1a<\/p>\n\n\n\n
import json\nimport asyncio\nimport websockets\n\nimport RPi.GPIO as GPIO\nimport time\n\ndef on_recv(message):\n data = json.loads(message)\n\n if data['led_r'] == 'on':\n GPIO.output(LED_R_PIN, GPIO.HIGH)\n if data['led_y'] == 'on':\n GPIO.output(LED_Y_PIN, GPIO.HIGH)\n if data['led_g'] == 'on':\n GPIO.output(LED_G_PIN, GPIO.HIGH)\n if data['led_b'] == 'on':\n GPIO.output(LED_B_PIN, GPIO.HIGH)\n\n if data['led_r'] == 'off':\n GPIO.output(LED_R_PIN, GPIO.LOW)\n if data['led_y'] == 'off':\n GPIO.output(LED_Y_PIN, GPIO.LOW)\n if data['led_g'] == 'off':\n GPIO.output(LED_G_PIN, GPIO.LOW)\n if data['led_b'] == 'off':\n GPIO.output(LED_B_PIN, GPIO.LOW)\n\n return json.dumps(data)\n\nasync def loop_func(websocket, path):\n async for message in websocket:\n rspstr = on_recv(message)\n await websocket.send(rspstr)\n\nasync def main():\n async with websockets.serve(loop_func, \"0.0.0.0\", 8080):\n await asyncio.Future()\n\nLED_R_PIN = 17\nLED_Y_PIN = 27\nLED_G_PIN = 22\nLED_B_PIN = 5\n\nGPIO.setmode(GPIO.BCM)\nGPIO.setwarnings(False)\n\nGPIO.setup(LED_R_PIN, GPIO.OUT)\nGPIO.setup(LED_Y_PIN, GPIO.OUT)\nGPIO.setup(LED_G_PIN, GPIO.OUT)\nGPIO.setup(LED_B_PIN, GPIO.OUT)\n\nasyncio.run(main())<\/code><\/pre>\n\n\n\n\u5728python\u4e2d\uff0cjson\u5b57\u7b26\u4e32\u8f6cpython\u5bf9\u8c61\u7684\u51fd\u6570\u662fjson.loads\uff0c\u505a\u53cd\u5411\u64cd\u4f5c\u7684\u51fd\u6570\u662fjson.dumps\u3002<\/p>\n\n\n\n
\u8fd0\u884c\u8d77\u6765\u4e4b\u540e\uff0c\u5c31\u80fd\u5728\u7f51\u9875\u4e0a\u63a7\u5236led\u706f\u7684\u4eae\u706d\u4e86\uff1a<\/p>\n\n\n\n
![\"\"](\"http:\/\/www.wangkaixuan.tech\/wp-content\/uploads\/2023\/12\/5171701683895_.pic_-473x1024.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/www.wangkaixuan.tech\/wp-content\/uploads\/2023\/12\/image-2.png\")
<\/figure>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
1.\u524d\u8a00 \u5728\u4e4b\u524d\u7684\u6587\u7ae0\u4e2d\uff08\u8fd9\u4e00\u7bc7\uff09\uff0c\u6211\u4eec\u624b\u5199\u4e86\u4e00\u4e2awebsocket\u670d\u52a1\u5668\uff0cwebsocket\u5168\u53cc\u5de5\u3001\u5b8c\u5168\u81ea\u5b9a\u534f\u8bae\u7684\u4f18\u52bf\u8ba9\u4eba\u65e0\u6cd5\u6297\u62d2\uff0c\u4eca\u5929\u6211\u4eec\u5c1d\u8bd5\u7528websoc…<\/p>\n