مقدمة في WebSockets

WebSockets بديل لاتصالات HTTP في تطبيقات الويب. إنها توفر قناة اتصال ثنائية الاتجاه طويلة الأمد بين العميل والخادم. تعرف على كيفية استخدامها لإجراء تفاعلات الشبكة

WebSockets بديل لاتصالات HTTP في تطبيقات الويب.

إنها توفر قناة اتصال ثنائية الاتجاه طويلة الأمد بين العميل والخادم.

بمجرد إنشائها ، تظل القناة مفتوحة ، مما يوفر اتصالاً سريعًا للغاية مع زمن انتقال منخفض ونفقات عامة

دعم المستعرض لـ WebSockets

يدعم WebSockets جميع المتصفحات الحديثة.

Browser support for WebSockets

كيف تختلف WebSockets عن HTTP

HTTP هو بروتوكول مختلف تمامًا ، وأيضًا طريقة مختلفة للتواصل.

HTTP هو بروتوكول طلب / استجابة: يقوم الخادم بإرجاع بعض البيانات عندما يطلبها العميل.

مع WebSockets:

  • اليمكن للخادم إرسال رسالة إلى العميلدون أن يطلب العميل شيئًا صريحًا
  • يمكن للعميل والخادمنتحدث مع بعضنا البعض في وقت واحد
  • القليل جدًا من البيانات العامةيحتاج إلى تبادل لإرسال الرسائل. هذا يعني أاتصال منخفض الكمون.

مآخذ الويبرائعة لفي الوقت الحالىوطويل العمرمجال الاتصالات.

HTTPعظيم لتبادل البيانات بين الحين والآخروالتفاعلات التي بدأها العميل.

HTTP أبسط بكثيرللتنفيذ ، بينما تتطلب WebSockets مزيدًا من النفقات

مآخذ ويب آمنة

استخدم دائمًا البروتوكول الآمن والمشفّر لـ WebSockets ،wss://.

ws://يشير إلى إصدار WebSockets غير الآمن (ملفhttp://WebSockets) ، ويجب تجنبه لأسباب واضحة.

قم بإنشاء اتصال WebSockets جديد

const url = 'wss://myserver.com/something'
const connection = new WebSocket(url)

connectionهومقبس الويبموضوع.

عندما يتم الاتصال بنجاح ، فإن ملفopenتم إطلاق الحدث.

استمع إليها عن طريق تخصيص وظيفة رد الاتصال إلىonopenممتلكاتconnectionموضوع:

connection.onopen = () => {
  //...
}

إذا كان هناك أي خطأ ، فإن ملفonerrorتم تشغيل رد الاتصال:

connection.onerror = (error) => {
  console.log(`WebSocket error: ${error}`)
}

إرسال البيانات إلى الخادم باستخدام WebSockets

بمجرد فتح الاتصال ، يمكنك إرسال البيانات إلى الخادم.

يمكنك القيام بذلك بسهولة داخلonopenوظيفة رد الاتصال:

connection.onopen = () => {
  connection.send('hey')
}

استقبال البيانات من الخادم باستخدام WebSockets

الاستماع مع تشغيل وظيفة رد الاتصالonmessage، وهو ما يسمى عندماmessageتم استلام الحدث:

connection.onmessage = (e) => {
  console.log(e.data)
}

قم بتنفيذ خادم في Node.js

ثهي مكتبة WebSockets شعبية لـNode.js.

سنستخدمه لبناء خادم WebSockets. يمكن استخدامه أيضًا لتنفيذ عميل ، واستخدام WebSockets للتواصل بين خدمتين من خدمات الواجهة الخلفية.

قم بتثبيته باستخدام ملفاتnpm:

npm init
npm install ws

الكود الذي تريد كتابته قليل جدًا:

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8080 })

wss.on(‘connection’, (ws) => { ws.on(‘message’, (message) => { console.log(Received message =&gt; </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">message</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) }) ws.send(‘ho!’) })

ينشئ هذا الرمز خادمًا جديدًا على المنفذ 8080 (المنفذ الافتراضي لـ WebSockets) ، ويضيف وظيفة رد الاتصال عند إنشاء اتصال ، وإرسالho!للعميل ، وتسجيل الرسائل التي يتلقاها.

شاهد مثالًا حيًا على Glitch

فيما يلي مثال حي لخادم WebSockets:https://glitch.com/edit/#!/flavio-websockets-server-example

إليك عميل WebSockets الذي يتفاعل مع الخادم:https://glitch.com/edit/#!/flavio-websockets-client-example

تصحيح أخطاء مآخذ الويب

يمتلك كل من Chrome و Firefox طريقة سهلة لتصور جميع المعلومات التي يتم إرسالها عبر WebSockets. إن دعم DevTools الخاص بهم يتحسن دائمًا. يحتوي Firefox في وقت كتابة هذا التقرير على أكثر أدوات تصحيح الأخطاء إفادة وإفادة.

في كليهما ، تنظر إلى لوحة الشبكة وتختار WS لتصفية اتصالات WebSockets فقط.

التقطت لقطات الشاشة هذه من Firefox (إصدار المطور) أثناء العمل:

Firefox headers

Firefox detail

يمكن لـ Firefox DevTools القيام بأكثر مما عرضته. في المثال الذي استخدمته للاختبار ، أرسل سلسلة فقط ، لكن يمكنك فحص أي بيانات يتم إرسالها بطريقة أكثر تنظيماً:

Data in Firefox

الدفعهذا المنشور على Mozilla Hacksلمعرفة المزيد حول كيفية استخدام هذه الأداة.

إليك لقطة شاشة لمتصفح Chrome ، والذي نأمل أن يحسن أدوات تصحيح أخطاء WebSockets قريبًا:

Chrome


المزيد من دروس الشبكة: