مقدمة خلفية المشروع
في الآونة الأخيرة ، هناك وحدة اجتماعية في المشروع الذي كتبته ، ومن الضروري تنفيذ وظيفة: عندما يتم إعجاب المستخدم أو التعليق أو المتبع ، وما إلى ذلك. عنوان المشروع النهائي هو: https://github.com/noiron/socket-message-push. سنقدم هنا أفكار التنفيذ وبعض الرموز.
هناك العديد من الكائنات في عملية المشروع:
عملية معالجة الأحداث هي كما يلي:
ضع في اعتبارك أن خادم Push Message يجب أن يسجل معلومات المستخدم الحالي عبر الإنترنت بحيث يمكن دفع الرسائل إلى مستخدمين معينين. لذلك ، عندما يقوم المستخدم بتسجيل الدخول ، يجب عليه أو هي إرسال معلومات المستخدم الخاصة به إلى خادم Node.js. من أجل تحقيق هذه المراسلة في الوقت الفعلي ثنائي الاتجاه ، من الواضح أن WebSocket يتم تنفيذها. نظرًا لأننا نستخدم Node.js على خادم Push Message ، لدينا خيار مناسب للغاية: socket.io.
مقدمة إلى Socket.io
Socket.io هي مكتبة للتواصل في الوقت الفعلي المنفذة في JavaScript. سيكون من السهل استخدامه لتنفيذ وظائفنا.
يحتوي Socket.io على جزأين:
يمكنك إلقاء نظرة على مثال Code of Socket.io التالي ، والذي يعطي الاستخدام الأساسي لـ Socket.io لإصدار الأحداث والاستماع إليها:
io.on ('connection' ، function (socket) {socket.emit ('request' ، / * * /) ؛ // emit حدثًا إلى المقبس io.emit ('broadcast' ، / * * /) ؛ // emit حدثًا لجميع socket.on socket.on ('الرد' ، الوظيفة () { / * /}) ؛ // استمع إلى الحدث}) ؛هناك شيء آخر يجب ملاحظته حول Socket.io: Socke.io ليس تطبيق WebSocket بالكامل.
ملاحظة: Socket.io ليس تطبيق WebSocket. على الرغم من أن Socket.io يستخدم بالفعل WebSocket كنقل عند الإمكان ، إلا أنه يضيف بعض البيانات الوصفية إلى كل حزمة: نوع الحزمة ، مساحة الاسم ومعرف ACK عند الحاجة إلى إقرار بالرسالة.
بعد ذلك ، نحتاج إلى استخدام Express.js لإنشاء برنامج من جانب الخادم وإدخال Socket.io.
Node.js Construction
استخدم Express.js لإنشاء خادم أساسي
استخدمنا express.js لإنشاء خادم دفع رسالة node.js ، واستخدموا أولاً مثالًا موجزًا لتصفح وظائفه:
// server.jsconst expression = require ('express') ؛ const app = express () ؛ const path = require ('path') ؛ const http = require ('http'). server (app) ؛ const port = 4001 ؛ app.use (express.Static (path.join (__ dirname ، 'public')) ؛ + '/public/index.html') ؛ )) ؛ ١ ؛ console.log (`الاستماع على المنفذ: $ {port}`) ؛}) ؛احفظ الكود أعلاه كخادم. js ، وإنشاء مجلد عام جديد ، ووضع ملف index.html فيه. قم بتشغيل الأمر التالي:
node server.js
يمكنك الآن عرض التأثير في LocalHost: 4001.
تقديم socket.io
الآن بعد أن يوجد خادم Express Basic ، يجب إضافة Socket.io إليه بعد ذلك.
const io = require ('socket.io') (http) ؛ io.on ('connection' ، function (socket) {console.log ('a user connection') ؛ socket.broadcast.emit ('new_user' ، {}) ؛}يستمع IO هنا إلى حدث الاتصال. بعد أن يقوم العميل بإنشاء اتصال مع الخادم ، سيتم استدعاء وظيفة رد الاتصال هنا (سيتم تقديم الرمز في العميل في القسم التالي).
يمثل مقبس المعلمة للدالة الاتصال الذي تم إنشاؤه بين العميل الحالي والخادم. يمكنك طباعة اتصال المقبس المعمول به في برنامج العميل ، كما هو موضح في الشكل أدناه:
يمكن استخدام سمة المعرف لتحديد هذا الاتصال حتى يتمكن الخادم من إرسال الرسائل إلى مستخدم معين.
socket.broadcast.emit ('new_user' ، {}) ؛يعني سطر الكود هذا أن المقبس سيبث رسالة تسمى New_user لجميع العملاء الذين لديهم اتصالات مع الخادم (باستثناء نفسه).
عملية معالجة الرسائل الواجهة الخلفية
معالجة معلومات المستخدم
للراحة ، يتم استخدام صفيف واحد فقط لحفظ معلومات المستخدم ، والتي يمكن وضعها في قاعدة البيانات حسب الحاجة في العمل الفعلي.
global.users = [] ؛ // سجل الرمز المميز ، مقبس المستخدم المسجل
عند تسجيل الدخول إلى المستخدم ، سيرسل العميل حدث user_login إلى الخادم. بعد استلام الخادم ، سيفعل ما يلي:
Socket.on ('user_login' ، function (info) {const {tokenid ، userId ، socketId} = info ؛ addSocketId (user ، {tokenid ، socketId ، userId}) ؛}) ؛ستضيف AddSocketId () معلومات المستخدم إلى صفيف المستخدمين. يمكن للمستخدمين المختلفين تمييزهم من خلال TokenId. كل مستخدم لديه صفيف المقبس ، والذي يحفظ مقبس متعددة قد توجد. يمكن العثور على الكود المحدد لهذه الوظيفة في ملف SRC/UTILS.JS.
وبالمثل ، هناك أيضًا وظيفة DELETESOCKETID () المستخدمة لحذف معلومات المستخدم ، ويمكن رؤية الرمز في نفس الملف.
بعد الحصول على الرمز المميز للمستخدم ، تحتاج إلى العثور على المقبس المقابل ثم الضغط على رسالة إلى المستخدم المحدد.
// إرسال الرسائل فقط إلى هذا الاتصال مع id = socketid io.sockets.to (socketID) .emit ('recept_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 = require ('socket.io-client') ؛ // أو مع استيراد syntaximport io من 'socket.io-client' ؛بعد تقديم Socket.io ، يتم الحصول على وظيفة IO ، ويتم استخدامها لإنشاء اتصال مع خادم Push Message.
// افترض أن العنوان بعد نشر خادم العقدة هو: 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 ، استمع إلى الحدث الذي يسمى RESET_MESSAGE MSGSOCKET.ON ('receed_message' ، msg => {store.dispatch ({type: 'new_socket_msg' ، payload: msg}) ؛}) ؛عندما يدفع خادم WebSocket رسالة إلى العميل ، يحتاج العميل إلى الاستماع إلى حدث Recever_message ، وتحتوي المعلمات المستلمة على معلومات معلقة مقابلة.
نظرًا لاستخدام Redux لمعالجة البيانات ، يتم إرسال إجراء New_socket_MSG هنا ، ويتم توفير تدفق معالجة Redux الروتيني اللاحق.
استخدام المشروع
عنوان المشروع على github: https://github.com/noiron/socket-message-push
npm run dev
يمكنك اختباره في بيئة التطوير ، والآن لديك خادم دفع الرسائل يعمل على المنفذ 4001.
ولكن لا يوجد خادم خلفي هنا لإرسال رسائل إلينا ، لذلك سنستخدم ساعي البريد لمحاكاة الرسائل الإرسال.
لإظهار وظائف البرنامج ، يتم وضع ملف index.html ضمن مجلد عميل المشروع. لاحظ أنه لا يمكن استخدام هذا الملف في المشاريع الفعلية ، فهو يستخدم فقط لعرض تأثير دفع الرسائل.
بعد تشغيل الخادم ، افتح العميل/الفهرس. html وأدخل رمزًا كما تريد وفقًا للمطالبات.
الآن استخدم ساعي البريد لنشر الرسالة التالية إلى LocalHost: 4001/API:
{// تشير صفيف الرموز إلى المستخدم الذي تريد دفع الرسالة "الرموز": ["1" ، "2"] ، "بيانات": "يجب ألا تمر !!!"}في هذه المرحلة ، إذا سارت الأمور على ما يرام ، فيجب أن تكون قادرًا على رؤية الرسالة المستلمة في وحدة التحكم للعميل.
يمكنك فتح عدة صفحات عميل ، وإدخال الرمز المميزات المختلفة ، ثم تحقق مما إذا تم إرسال الرسالة إلى المستخدم الصحيح.
لخص
ما سبق هو ما قدمه لك المحرر لاستخدام socket.io لتحقيق وظيفة دفع الرسائل في الوقت الحقيقي. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!