การแนะนำพื้นหลังโครงการ
เมื่อเร็ว ๆ นี้มีโมดูลโซเชียลในโครงการที่ฉันเขียนและจำเป็นต้องใช้ฟังก์ชั่น: เมื่อผู้ใช้ชอบแสดงความคิดเห็นตามมา ฯลฯ เกิดขึ้นข้อความจะต้องส่งข้อความโดยเซิร์ฟเวอร์ไปยังผู้ใช้แบบเรียลไทม์ ที่อยู่โครงการสุดท้ายคือ: https://github.com/noiron/socket-message-push ที่นี่เราจะแนะนำแนวคิดการใช้งานและรหัสบางอย่าง
มีวัตถุหลายอย่างในกระบวนการโครงการ:
กระบวนการประมวลผลเหตุการณ์มีดังนี้:
พิจารณาว่าเซิร์ฟเวอร์พุชข้อความจะต้องบันทึกข้อมูลของผู้ใช้ออนไลน์ปัจจุบันเพื่อให้สามารถส่งข้อความไปยังผู้ใช้ที่เฉพาะเจาะจง ดังนั้นเมื่อผู้ใช้เข้าสู่ระบบเขาหรือเธอจะต้องส่งข้อมูลผู้ใช้ของตนเองไปยังเซิร์ฟเวอร์ Node.js เพื่อให้บรรลุการส่งข้อความแบบเรียลไทม์แบบสองทิศทางนี้เป็นที่ชัดเจนว่า WebSocket ถูกนำไปใช้ เนื่องจากเราใช้ node.js บนเซิร์ฟเวอร์ส่งข้อความเราจึงมีตัวเลือกที่สะดวกมาก: socket.io
รู้เบื้องต้นเกี่ยวกับ socket.io
Socket.io เป็นห้องสมุดการสื่อสารสองทางแบบเรียลไทม์ที่ใช้ใน JavaScript มันจะใช้งานง่ายเพื่อใช้งานฟังก์ชั่นของเรา
Socket.io มีสองส่วน:
คุณสามารถดูรหัสตัวอย่างต่อไปนี้ของ socket.io ซึ่งให้การใช้งานขั้นพื้นฐานของ socket.io เพื่อออกและฟังเหตุการณ์:
io.on ('การเชื่อมต่อ', ฟังก์ชั่น (ซ็อกเก็ต) {socket.emit ('คำขอ', / * * /); // ปล่อยเหตุการณ์ไปยังซ็อกเก็ต io.emit ('ออกอากาศ', / * * /); // ปล่อยเหตุการณ์ไปยังซ็อกเก็ตที่เชื่อมต่อทั้งหมดมีอีกสิ่งหนึ่งที่ควรทราบเกี่ยวกับ socket.io: socke.io ไม่ได้เป็นการใช้งาน WebSocket ทั้งหมด
หมายเหตุ: Socket.io ไม่ใช่การใช้งาน WebSocket แม้ว่า Socket.io จะใช้ WebSocket เป็นการขนส่งเมื่อเป็นไปได้ แต่ก็เพิ่มข้อมูลเมตาบางส่วนในแต่ละแพ็คเก็ต: ประเภทแพ็คเก็ตเนมสเปซและ ACK ID เมื่อจำเป็นต้องรับทราบข้อความ
ต่อไปเราต้องใช้ Express.js เพื่อสร้างโปรแกรมฝั่งเซิร์ฟเวอร์และแนะนำ socket.io
การก่อสร้างเซิร์ฟเวอร์ node.js
ใช้ Express.js เพื่อสร้างเซิร์ฟเวอร์พื้นฐาน
เราใช้ Express.js เพื่อสร้างเซิร์ฟเวอร์พุชข้อความ node.js และก่อนอื่นให้ใช้ตัวอย่างสั้น ๆ เพื่อเรียกดูฟังก์ชั่น:
// server.jsconst expression = ต้องการ ('express'); const app = express (); const path = ต้องการ ('path'); const http = require ('http'). เซิร์ฟเวอร์ (แอป); พอร์ต const = 4001; app.use (express.static.static (path.join (__ dirname + '/public/index.html'); }); app.get('/api', ฟังก์ชั่น (req, res) {res.sendfile (__ dirname + '/public/index.html'); {console.log (`การฟังบนพอร์ต: $ {พอร์ต}`);});บันทึกรหัสด้านบนเป็น server.js สร้างโฟลเดอร์สาธารณะใหม่และใส่ไฟล์ index.html ไว้ในนั้น เรียกใช้คำสั่งต่อไปนี้:
node server.js
ตอนนี้คุณสามารถดูเอฟเฟกต์ได้ที่ LocalHost: 4001
แนะนำ socket.io
ตอนนี้มีเซิร์ฟเวอร์ด่วนพื้นฐานแล้ว Socket.io จะต้องเพิ่มไปยังมันต่อไป
const io = ต้องการ ('socket.io') (http); io.on ('การเชื่อมต่อ', ฟังก์ชั่น (ซ็อกเก็ต) {console.log ('ผู้ใช้ที่เชื่อมต่อ'); socket.broadcast.emit ('new_user', {});};IO ที่นี่ฟังเหตุการณ์การเชื่อมต่อ หลังจากไคลเอนต์สร้างการเชื่อมต่อกับเซิร์ฟเวอร์ฟังก์ชันการโทรกลับที่นี่จะถูกเรียก (รหัสในไคลเอนต์จะถูกนำเสนอในส่วนถัดไป)
ซ็อกเก็ตพารามิเตอร์ของฟังก์ชั่นแสดงถึงการเชื่อมต่อที่กำหนดไว้ระหว่างไคลเอนต์ปัจจุบันและเซิร์ฟเวอร์ คุณสามารถพิมพ์การเชื่อมต่อซ็อกเก็ตที่จัดตั้งขึ้นในโปรแกรมไคลเอนต์ดังแสดงในรูปด้านล่าง:
แอตทริบิวต์ ID สามารถใช้เพื่อระบุการเชื่อมต่อนี้เพื่อให้เซิร์ฟเวอร์สามารถส่งข้อความไปยังผู้ใช้เฉพาะ
socket.broadcast.emit ('new_user', {});รหัสบรรทัดนี้หมายความว่าซ็อกเก็ตจะออกอากาศข้อความชื่อ new_user ไปยังไคลเอนต์ทั้งหมดที่มีการเชื่อมต่อกับเซิร์ฟเวอร์ (ไม่รวมตัวเอง)
กระบวนการประมวลผลข้อความพุชแบ็กเอนด์
การประมวลผลข้อมูลผู้ใช้
เพื่อความสะดวกมีเพียงอาร์เรย์เดียวเท่านั้นที่ใช้เพื่อบันทึกข้อมูลผู้ใช้ซึ่งสามารถใส่ลงในฐานข้อมูลได้ตามต้องการในการทำงานจริง
global.users = []; // บันทึก tokenid, socketid ของผู้ใช้ที่เข้าสู่ระบบ
เมื่อผู้ใช้เข้าสู่ระบบไคลเอนต์จะส่งเหตุการณ์ user_login ไปยังเซิร์ฟเวอร์ หลังจากเซิร์ฟเวอร์ได้รับมันจะทำสิ่งต่อไปนี้:
socket.on ('user_login', ฟังก์ชั่น (ข้อมูล) {const {tokenid, userid, socketid} = info; addSocketId (ผู้ใช้, {tokenid, socketId, userId});});addSocketId () จะเพิ่มข้อมูลผู้ใช้ในอาร์เรย์ของผู้ใช้ ผู้ใช้ที่แตกต่างกันสามารถแยกแยะพวกเขาผ่าน tokenid ผู้ใช้แต่ละคนมีอาร์เรย์ socketids ซึ่งบันทึก socketids หลายตัวที่อาจมีอยู่ รหัสเฉพาะของฟังก์ชั่นนี้สามารถพบได้ในไฟล์ SRC/UTILS.JS
ในทำนองเดียวกันยังมีฟังก์ชั่น deletesocketId () ที่ใช้ในการลบข้อมูลผู้ใช้และรหัสสามารถเห็นได้ในไฟล์เดียวกัน
หลังจากได้รับ tokenid ของผู้ใช้คุณจะต้องค้นหา socketid ที่เกี่ยวข้องแล้วส่งข้อความไปยังผู้ใช้เฉพาะ
// ส่งข้อความไปยังการเชื่อมต่อนี้ด้วย id = socketId io.sockets.to (socketId) .emit ('รับ _message', {entityType, data});แนวคิดของเซิร์ฟเวอร์นั้นเป็นเช่นนี้ ถัดไปเรามาแนะนำวิธีการประมวลผลตามที่ลูกค้า
ลูกค้า
การเริ่มต้นของ socket.io
ก่อนอื่นแนะนำไฟล์ฝั่งไคลเอ็นต์ของ socket.io ในไฟล์ HTML ตัวอย่างเช่นผ่าน CDN:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </script>
วิธีอื่น ๆ ในการแนะนำ:
<script src = "/socket.io/socket.io.js"></script>const io = ต้องการ ('socket.io-client'); // หรือด้วยการนำเข้า syntaximport io จาก 'socket.io-client';หลังจากแนะนำ socket.io ฟังก์ชั่น IO จะได้รับและใช้เพื่อสร้างการเชื่อมต่อกับเซิร์ฟเวอร์พุชข้อความ
// สมมติว่าที่อยู่หลังจากที่คุณปรับใช้เซิร์ฟเวอร์โหนดคือ: https://www.example.com/ws// จากนั้น: ws_host = 'https: //www.example.com'const msgsocket = io (`$ {ws_host}`หากฟังในพื้นที่:
const msgsocket = io ('http: // localhost: 4001');หากคุณเขียนเป็น IO ('https://www.example.com/ws') ที่นี่ข้อผิดพลาดจะเกิดขึ้นและ/ws จะต้องเขียนลงในเส้นทาง
เพื่อให้สามารถใช้ตัวแปรนี้ในไฟล์อื่น ๆ MSGSOCKET สามารถใช้เป็นตัวแปรส่วนกลาง:
window.msgsocket = msgsocket;
ผู้ใช้สร้างการเชื่อมต่อ
// เมื่อผู้ใช้เข้าสู่ระบบส่งข้อมูลผู้ใช้ไปยังเซิร์ฟเวอร์ เซิร์ฟเวอร์จะสร้างการแมปซ็อกเก็ตกับผู้ใช้หลังจากได้รับข้อความ msgsocket.emit ('user_login', {userId, socketId: msgsocket.id, tokenid});การประมวลผลหลังจากได้รับข้อความที่ผลักดัน
// หลังจากสร้างการเชื่อมต่อ WebSocket ให้ฟังเหตุการณ์ที่เรียกว่ารับ _message msgsocket.on ('รับ _message', msg => {store.dispatch ({type: 'new_socket_msg', payload: msg});});เมื่อเซิร์ฟเวอร์ WebSocket ส่งข้อความไปยังไคลเอนต์ไคลเอนต์จะต้องฟังเหตุการณ์ที่ได้รับ _message และพารามิเตอร์ที่ได้รับจะมีข้อมูลที่ค้างอยู่
เนื่องจาก Redux ใช้สำหรับการประมวลผลข้อมูลการดำเนินการ new_socket_msg ถูกส่งไปที่นี่และมีการจัดทำกระแสการประมวลผล Redux ตามปกติที่ตามมา
การใช้โครงการ
ที่อยู่โครงการเกี่ยวกับ GitHub: https://github.com/noiron/socket-message-push
npm run dev
คุณสามารถทดสอบได้ในสภาพแวดล้อมการพัฒนาและตอนนี้คุณมีเซิร์ฟเวอร์พุชข้อความที่ทำงานบนพอร์ต 4001
แต่ไม่มีเซิร์ฟเวอร์แบ็กเอนด์ที่นี่เพื่อส่งข้อความถึงเราดังนั้นเราจะใช้บุรุษไปรษณีย์เพื่อจำลองการส่งข้อความ
เพื่อแสดงให้เห็นถึงฟังก์ชั่นของโปรแกรมไฟล์ index.html จะถูกวางไว้ใต้โฟลเดอร์ไคลเอนต์ของโครงการ โปรดทราบว่าไฟล์นี้ไม่สามารถใช้ในโครงการจริงได้เพียงแค่ใช้เพื่อแสดงผลของการกดข้อความ
หลังจากเปิดเซิร์ฟเวอร์ให้เปิดไคลเอนต์/index.html และป้อนโทเค็นด์ตามที่คุณต้องการตามพรอมต์
ตอนนี้ใช้บุรุษไปรษณีย์เพื่อโพสต์ข้อความต่อไปนี้ไปยัง LocalHost: 4001/API:
{// อาร์เรย์โทเค็นระบุว่าผู้ใช้ที่คุณต้องการส่งข้อความ "โทเค็น": ["1", "2"], "ข้อมูล": "คุณจะไม่ผ่าน !!!"}ณ จุดนี้หากทุกอย่างเป็นไปด้วยดีคุณควรจะเห็นข้อความที่ได้รับในคอนโซลของลูกค้า
คุณสามารถเปิดหน้าไคลเอนต์หลายหน้าป้อน tokenids ที่แตกต่างกันจากนั้นตรวจสอบว่าข้อความถูกส่งไปยังผู้ใช้ที่ถูกต้องหรือไม่
สรุป
ข้างต้นคือสิ่งที่ตัวแก้ไขแนะนำให้คุณใช้ socket.io เพื่อตระหนักถึงฟังก์ชั่นการกดข้อความแบบเรียลไทม์ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!