เปิดเว็บ!: 4 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:06

Ring the Web ใช้สำหรับส่งผลกระทบต่อเว็บไซต์จากสถานที่จริง

ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้:

makker.hu/RingTheWeb/

คุณจะต้องการ:

• 1 ปุ่มกด
• ตัวต้านทาน 10k
• Arduino (ประเภทใดก็ได้)
• สายเคเบิล
• คอมพิวเตอร์ขนาดเล็กที่ใช้พลังงานต่ำ - ในกรณีนี้คือ RPi
• เข้าถึงเซิร์ฟเวอร์หรือคอมพิวเตอร์ที่มี IP สาธารณะด้วย node.js
• เว็บไซต์

ขั้นตอน:

1. ปุ่มกดไปยัง Arduino
2. Arduino ถึง Raspberry
3. ราสเบอร์รี่ไปยังเซิร์ฟเวอร์
4. เว็บไซต์ไปยังเซิร์ฟเวอร์

ขั้นตอนที่ 1: ปุ่มกดไปยัง Arduino

ก่อนอื่นคุณต้องมี Arduino และปุ่มกด!

ประเภทใดก็ได้ขึ้นอยู่กับคุณที่จะเลือก

สำหรับการเชื่อมต่อ โปรดปฏิบัติตามบทแนะนำเกี่ยวกับปุ่มอย่างเป็นทางการของ Arduino

นี่คือรหัส Arduino:

// รหัส Arduino สำหรับอ่านพินดิจิตอลและส่งค่าไปยังพอร์ตอนุกรม

// Balázs Kovács, 2018. การตั้งค่าเป็นโมฆะ () { Serial.begin(9600); // เปิดพอร์ตอนุกรม pinMode(8, INPUT); // เชื่อมต่อปุ่มกดกับ Pin 8 } ตัวนับ int = 0; // สิ่งที่ใช้ในภายหลัง void loop() { if(digitalRead(8) == 1) {// check pin 8 status Serial.write("8"); } ล่าช้า (100); เคาน์เตอร์++; if (ตัวนับ = 20) { // ทุกๆ 20x100 = 2000ms -> ตัวนับ = 0; Serial.write("0"); // ส่งข้อความ "ฉันมีอยู่แล้ว" ไปยังเซิร์ฟเวอร์ } } // นั่นคือทั้งหมด!

ขั้นตอนที่ 2: Arduino ถึง Raspberry

ตอนนี้เราสามารถเชื่อมต่อ Arduino กับคอมพิวเตอร์ได้แล้ว ในกรณีนี้ เราใช้ Raspberry เนื่องจากใช้พลังงานต่ำ

เชื่อมต่อผ่าน USB หรือโดยตรงกับพิน RX-TX ที่อธิบายไว้ที่นี่

จากนั้นติดตั้ง node.js และ npm ตามที่อธิบายไว้ที่นี่ คำหลักคือ:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E ทุบตี -

แล้วก็

sudo apt-get ติดตั้ง -y nodejs

Npm (ตัวจัดการแพ็คเกจของ Node.js) ต้องการโมดูล socket.io-client และพอร์ตอนุกรม ดังนั้นให้ติดตั้ง:

npm ติดตั้ง socket.io-client

npm ติดตั้งพอร์ตอนุกรม

เปิดและบันทึกไฟล์ something.js ด้วยรหัสต่อไปนี้:

// เริ่มต้นการเชื่อมต่อ socket.io:

ซ็อกเก็ต var; var io = ต้องการ ('socket.io-client'); socket = io("https://yourserver.com:port"); // หากการเชื่อมต่อกับเซิร์ฟเวอร์สำเร็จ: socket.on('connect', function(){ socket.send("i'm here!"); console.log("connected to the server"); }); // เริ่มต้นการสื่อสารพอร์ตอนุกรม NB /dev=ttyACM0 สามารถเปลี่ยนแปลงได้: var SerialPort = ต้องการ ('พอร์ตอนุกรม'); var serialPort = SerialPort ใหม่ ('/dev/ttyACM0', { baudRate: 9600 }); // หากมีบางสิ่งที่มาจาก Arduino ให้ส่งข้อความที่แตกต่างกัน // ไปยังเซิร์ฟเวอร์ตามนั้น serialPort.on('data', function (data) { console.log('Data:', data.toString('ascii')); if(data.indexOf('8')!==-1){ socket.send('/RingTheBell 1'); } if(data.indexOf('0')!==-1){ ซ็อกเก็ต send('/client1 1'); } }); // อ่านข้อมูลที่มีอยู่ - ฉันคิดว่าไม่จำเป็น serialPort.on('readable', function () { console.log('Data:', port.read()); });

ตอนนี้ คุณควรตั้งค่าโค้ด node.js ฝั่งเซิร์ฟเวอร์ด้วย จนกระทั่งคุณสามารถเริ่มและทดสอบสคริปต์โดย

โหนด./something.js

หากมีอะไรผิดพลาดโปรดแจ้งให้เราทราบ!

ขั้นตอนที่ 3: รหัสฝั่งเซิร์ฟเวอร์

ทางฝั่งเซิร์ฟเวอร์ เราต้องการ node.js กับเซิร์ฟเวอร์ socket.io

ดังนั้นเพิ่มด้วย:

npm ติดตั้ง socket-io

จากนั้น คุณจะต้องมีสคริปต์ที่คล้ายกับโค้ดในขั้นตอนที่ 2 โดยมีความแตกต่างที่รอการเชื่อมต่อ และหากมีอยู่ ก็จะเผยแพร่ข้อความที่ส่งจากไคลเอ็นต์ไปยังไคลเอ็นต์ทั้งหมด ในส่วนนี้ กรณีผู้ใช้เว็บไซต์…

ดังนั้น เปิด serverscript.js ด้วยสิ่งต่อไปนี้:

var http = ต้องการ ('http'), io = ต้องการ ('socket.io'); // เปิดเซิร์ฟเวอร์ http ขั้นต่ำ socket.io ต้องการมัน เซิร์ฟเวอร์ var = http.createServer (ฟังก์ชัน (req, res) { res.writeHead (200, { 'Content-Type': 'text/html' }); res.end ('hello'); }); // เปิดซ็อกเก็ต TCP - ตั้งค่าพอร์ตของคุณ! server.listen (7004, function () { console.log ("เซิร์ฟเวอร์ TCP ที่ทำงานบนพอร์ต 7004"); }); // วิเคราะห์ข้อความ tcp var socket=io.listen(เซิร์ฟเวอร์); socket.on ('การเชื่อมต่อ', ฟังก์ชัน (ไคลเอนต์, rinfo) { client.broadcast.emit ('ระบบ', 'ใครบางคนที่เชื่อมต่อ… '); client.on ('ข้อความ' ฟังก์ชัน (เหตุการณ์) { console.log (เหตุการณ์)); // เผยแพร่ข้อความใด ๆ ไปยังผู้ใช้ที่เชื่อมต่อทุกคน socket.emit('message', event); }); client.on('everybody', function(event){ }); client.on('disconnect', ฟังก์ชั่น (){ socket.emit ('ข้อความ', 'ใครบางคนยกเลิกการเชื่อมต่อ…'); }); });

มาลองทดสอบกันได้กับ

โหนด./serverscript.js

ถ้าไคลเอนต์กำลังทำงานด้วย คุณควรเห็นการสื่อสารของพวกเขาบนคอนโซลทั้งสอง อย่างน้อยเหล่านี้:

ข้อมูล: 0

- บอกระบบเป็นระยะว่าการสื่อสารของเซิร์ฟเวอร์ Arduino->Raspberry->กำลังทำงานอยู่

และ

ข้อมูล: 8

- บอกว่าปุ่มเปิดอยู่

ขั้นตอนที่ 4: กำหนดค่าเว็บไซต์

ตอนนี้เราพร้อมแล้วกับ 75% !

เสร็จสิ้นการทำงานหนักด้วยการใส่รหัสสำหรับเว็บไซต์

มันเป็นเรื่องง่าย.

ขั้นแรกให้รวมไคลเอนต์ socket.io:

จากนั้นสร้างระบบวิเคราะห์ข้อความ:

ซ็อกเก็ต var;

socket = io("yourserver.com:port"); socket.on('connect', function () { socket.send('anonym client - a website user - is connected!'); socket.on('message', function (msg) { // ถ้าคุณต้องการดู ทุกข้อความ เพียงแค่ยกเลิกการใส่ความคิดเห็น: // console.log(msg); if (msg == "/RingTheBell 1") // มีโค้ดสำหรับใช้แสดงเหตุการณ์ปุ่มกด: { document.body.style.background = "#ccc"; setTimeout(function() { document.body.style.background = "#000"; }, 1000); }; if (msg == "/client1 1") { // คุณสามารถวางบางสิ่งได้ที่นี่ ซึ่งตอบสนองต่อสถานะไคลเอนต์ที่เชื่อมต่อ }; });

โว้ว!

พร้อม.