1. مقدمة
بادئ ذي بدء ، الموقع الرسمي لـ Socket.io: http://socket.io
الموقع الرسمي موجز للغاية ، ولا يوجد حتى وثائق API ، فقط "كيفية الاستخدام" بسيطة للإشارة إلى. لأن Socket.io بسيطة وسهلة الاستخدام مثل الموقع الرسمي.
إذن ما هو Socket.io؟ Socket.io هي مكتبة WebSocket تتضمن JS من جانب العميل و NodeJs من جانب الخادم. هدفها هو بناء تطبيقات في الوقت الفعلي يمكن استخدامها على متصفحات مختلفة وأجهزة محمولة. سيختار تلقائيًا أفضل طريقة لتحقيق تطبيق الشبكة في الوقت الفعلي استنادًا إلى المتصفح من طرق مختلفة مثل WebSocket ، و Ajax Long Solling ، ودفق iFrame ، وما إلى ذلك ، وهو مناسب للغاية وسهل الاستخدام. المتصفحات المدعومة منخفضة مثل IE5.5 ، والتي يجب أن تلبي معظم الاحتياجات.
2. التثبيت والنشر
2.1 التثبيت
بادئ ذي بدء ، التثبيت بسيط للغاية ، في بيئة Node.js ، جملة واحدة فقط:
نسخة الكود كما يلي:
NPM تثبيت socket.io
2.2 الجمع بين Express لإنشاء خادم
Express عبارة عن إطار عمل على شبكة الإنترنت Node.js ، والذي يتم استخدامه غالبًا عند إنشاء خوادم HTTP ، لذلك يتم شرحه مباشرة باستخدام Socket.io و Express كأمثلة.
نسخة الكود كما يلي:
var express = require ('Express')
، التطبيق = Express ()
، خادم = مطلوب ('http'). createServer (app)
، io = require ('socket.io'). الاستماع (الخادم) ؛
server.listen (3001) ؛
إذا لم تستخدم Express ، فيرجى الرجوع إلى Socket.io/#how- إلى الاستخدام
3. طريقة الاستخدام الأساسية
وهي مقسمة بشكل أساسي إلى قطعتين من التعليمات البرمجية: جانب الخادم وجانب العميل ، وكلاهما بسيط للغاية.
الخادم (app.js):
نسخة الكود كما يلي:
// قم بتوصيل الرمز أعلاه
app.get ('/' ، function (req ، res) {
Res.SendFile (__ dirname + '/index.html') ؛}) ؛
io.sockets.on ('connection' ، function (socket) {
Socket.emit ('News' ، {hello: 'World'}) ؛
Socket.on ('حدث آخر' ، الدالة (البيانات) {
console.log (البيانات) ؛
}) ؛
}) ؛
أولاً ، تقبل وظيفة io.sockets.on السلسلة "اتصال" كحدث يبدأ فيه العميل في الاتصال. عندما يكون الاتصال ناجحًا ، يتم استدعاء وظيفة رد الاتصال باستخدام معلمات المقبس. عندما نستخدم Socket.io ، فإننا نتعامل بشكل أساسي مع طلبات المستخدم في وظيفة رد الاتصال هذه.
أهم شيء في المقبس هو الانبعاث. يقدم السابق (القضايا) حدثًا (يتم تمثيل اسم الحدث بسلسلة). يمكن تخصيص اسم الحدث ، وهناك بعض أسماء الأحداث الافتراضية ، تليها كائن ، يشير إلى المحتوى المرسلة إلى المقبس ؛ يتلقى الأخير حدثًا (يتم تمثيل اسم الحدث بسلسلة) ، تليها وظيفة رد الاتصال التي تتلقى مكالمة الحدث ، حيث تكون البيانات هي البيانات المستلمة.
في المثال أعلاه ، أرسلنا الحدث الإخباري وتلقينا حدث الحدث الآخر ، لذلك يجب أن يكون لدى العميل أحداث الاستلام وإرسالها المقابلة. نعم ، رمز العميل هو عكس ذلك تمامًا ويشبه الخادم.
العميل (client.js)
نسخة الكود كما يلي:
<script src = "/socket.io/socket.io.js"> </script>
<script>
var socket = io.connect ('http: // localhost') ؛
Socket.on ('News' ، function (data) {
console.log (البيانات) ؛
socket.emit ('event event' ، {my: 'data'}) ؛
}) ؛
</script>
هناك شيئان يجب ملاحظة: يجب كتابة مسار Socket.io.js بشكل صحيح. يتم وضع ملف JS هذا بالفعل في مجلد Node_Modules على جانب الخادم. سيتم إعادة توجيهه عند طلب هذا الملف. لذلك ، لا تتفاجأ من أن هذا الملف غير موجود على جانب الخادم ولكن لماذا لا يزال يعمل بشكل طبيعي. بالطبع ، يمكنك نسخ ملف Socket.io.io.io.io.io.io إلى محليًا وجعله ملف JS من جانب العميل ، لذلك لا يتعين عليك طلب ملف JS هذا من خادم العقدة في كل مرة ، مما يعزز الاستقرار. النقطة الثانية هي استخدام Var Socket = io.connect ("عنوان موقع الويب أو IP") ؛ للحصول على كائن المقبس ، وبعد ذلك يمكنك استخدام Socket لإرسال وتلقي الأحداث. فيما يتعلق بمعالجة الأحداث ، يعني الرمز أعلاه أنه بعد تلقي حدث "الأخبار" ، تتم طباعة البيانات المستلمة ويتم إرسال حدث "الحدث الآخر" إلى الخادم.
ملاحظة: يعني اسم الحدث الافتراضي المدمج ، مثل "disconnect" أن اتصال العميل غير متصل ، "الرسالة" تعني أن الرسالة قد تم استلامها ، وما إلى ذلك. لأسماء الأحداث المخصصة ، حاول عدم مضاعفة الاسم بأسماء الأحداث الافتراضية المضمنة في socket.io ، حتى لا تسبب مشكلة غير ضرورية.
4. واجهات برمجة التطبيقات المشتركة الأخرى
1). بث إلى جميع العملاء: socket.broadcast.emit ('رسالة البث') ؛
2). أدخل غرفة (سهلة الاستخدام للغاية! إنها تعادل مساحة الاسم ، والتي يمكن بثها إلى غرفة معينة دون التأثير على العملاء في غرف أخرى أو لا في الغرفة): Socket.oin ("اسم غرفتك") ؛
3). رسالة البث إلى غرفة (لا يمكن للمرسل استلام الرسالة): socket.broadcast.to ('اسم غرفتك'). EMIT ('Broadcast Room Message') ؛
4). رسائل البث إلى غرفة (بما في ذلك المرسل يمكنه تلقي الرسائل) (ينتمي واجهة برمجة التطبيقات هذه إلى io.sockets): io.sockets.in ("اسم غرفة آخر"). EMIT ("رسالة غرفة البث") ؛
5). Force Websocket Communication: (Client) Socket.send ('hi') ، (server) استخدم socket.on ('message' ، function (data) {}) لتلقيه.
5. بناء غرفة دردشة باستخدام socket.io
أخيرًا ، ننهي هذا المقال بمثال بسيط. يعد استخدام Socket.io لإنشاء غرفة دردشة حوالي 50 سطرًا من التعليمات البرمجية ، كما أن تأثير الدردشة في الوقت الفعلي جيدًا أيضًا. يتم نشر رموز المفاتيح التالية:
الخادم (Socketchat.js)
نسخة الكود كما يلي:
// قاموس اتصال العميل ، عندما يتصل العميل بالخادم ،
// سيتم إنشاء مقبس فريد من نوعه ، وسيحمل القاموس رسم خرائط للمقبس إلى معلومات المستخدم (اللقب ، إلخ)
var connectionList = {} ؛
Exports.StartChat = function (io) {
io.sockets.on ('connection' ، function (socket) {
// حفظ SocketID واسم المستخدم عند اتصال العميل
var socketid = socket.id ؛
ConnectionList [SocketId] = {
المقبس: المقبس
} ؛
// يدخل المستخدم حدث غرفة الدردشة ويبث اسم المستخدم الخاص به إلى مستخدمين آخرين عبر الإنترنت
Socket.on ('Join' ، function (data) {
socket.broadcast.emit ('Broadcast_Join' ، data) ؛
ConnectionList [SocketId] .username = data.username ؛
}) ؛
// يترك المستخدم حادث غرفة الدردشة ويبث رحيله للمستخدمين الآخرين عبر الإنترنت
Socket.on ('disconnect' ، function () {
if (ConnectionList [SocketId] .username) {
Socket.broadcast.emit ('Broadcast_Quit' ، {
اسم المستخدم: ConnectionList [SocketId]. username
}) ؛
}
حذف ConnectionList [SocketId] ؛
}) ؛
// حادثة خطاب المستخدم ، تبث محتوى خطابهم إلى مستخدمين آخرين عبر الإنترنت
Socket.on ('say' ، function (data) {
socket.broadcast.emit ('Broadcast_Say' ، {
اسم المستخدم: ConnectionList [SocketId]. username ،
النص: data.text
}) ؛
}) ؛
})
} ؛
العميل (socketchatclient.js)
نسخة الكود كما يلي:
var socket = io.connect ('http: // localhost') ؛
// بعد الاتصال بالخادم ، أرسل حدث "انضمام" على الفور وأخبر الآخرين اسم المستخدم الخاص بك
Socket.emit ('Join' ، {
اسم المستخدم: "اسم المستخدم هيه"
}) ؛
// بعد تلقي بث الانضمام إلى غرفة الدردشة ، سيتم عرض الرسالة
Socket.on ('Broadcast_Join' ، function (data) {
console.log (data.userName + 'تمت إضافته إلى غرفة الدردشة') ؛
}) ؛
// بعد تلقي البث يغادر غرفة الدردشة ، يتم عرض الرسالة
Socket.on ('broadcast_quit' ، function (data) {
console.log (data.username + "اترك غرفة الدردشة") ؛
}) ؛
// بعد تلقي رسالة أرسلها شخص آخر ، سيتم عرض الرسالة
Socket.on ('broadcast_say' ، function (data) {
console.log (data.userName + 'say:' + data.text) ؛
}) ؛
// هنا نفترض أن هناك نص مربع نص وزر إرسال.
// inter acture باستخدام jQuery
$ ('. btn-send'). انقر فوق (وظيفة (e) {
// احصل على نص مربع النص
var text = $ ('textarea'). val () ؛
// إرسال حدث للقول وسيقوم الخادم ببثه عندما يستقبله.
socket.emit ('say' ، {
اسم المستخدم: "اسم المستخدم هيه"
النص: نص
}) ؛
}) ؛
هذا عرض بسيط في غرفة الدردشة التي يمكنك توسيعها كما تريد. Socket.io هو في الأساس معالجة التقديم والاستقبال لأحداث مختلفة ، والفكرة بسيطة للغاية.