في الآونة الأخيرة ، نظرًا لاحتياجات المشروع ، فقد درست تطبيق WebSocket من NodeJS ، Socket.io ، وهو إطار يستخدم على نطاق واسع من قبل تطبيقات خلفية NodeJS.
تحضير
1. تثبيت socket.io واستخدم الأمر npm تثبيت socket.io
2. بالنسبة لأنظمة Windows ، مطلوب بيئة تجميع VC ، لأنه عند تثبيت Socket.io ، سيتم تجميع رمز VC.
المبادئ الأساسية للعبة
1. يستمع الخادم إلى اتصال العميل
2. عندما يكون اتصال العميل ناجحًا ، تقوم صفحة الربط بنقل حدث الماوس ، ويتم إرسال الإحداثيات الحالية إلى الخادم.
3. يحفظ الخادم كائن إحداثيات عالمي ويستخدم الرقم الفريد للعميل كقيمة مفتاح.
4. عندما يأتي اتصال جديد ، يبث الإحداثيات للعملاء الآخرين
5. عندما يتم فصل العميل ، يقوم الخادم بحذف معلومات الإحداثيات الخاصة به ويبثها للعملاء الآخرين.
ابدأ في تطبيق رمز الخادم
عندما تقوم Scoket.io بإنشاء مراقبة الخادم ، فإنها تحتاج إلى الاعتماد على اتصال HTTP للتعامل مع بروتوكول الترقية ، لذلك يحتاج أيضًا إلى وحدة HTTP ، الرمز كما يلي:
نسخة الكود كما يلي:
var http = require ('http') ،
io = require ('socket.io') ؛
var app = http.createserver (). الاستماع (9091) ؛
var ws = io.listen (app) ؛
ثم حدد كائن إحداثي عالمي
نسخة الكود كما يلي:
VAR POSTS = {} ؛
ابدأ في الاستماع إلى اتصال العميل وإضافة وظيفة بث جديدة (في الواقع ، يمكنك استخدام طريقة البث io.sockets.broadcast.emit ، والتي تأتي مع Socket.io) ، والرمز الأساسي هو كما يلي:
نسخة الكود كما يلي:
ws.on ('connection' ، function (client) {
// وظيفة البث
var broadcast = function (msg ، cl) {
لـ (var k في ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .id! = cl.id) {
ws.sockets.sockets [k] .emit ('position.Change' ، msg) ؛
}
}
}
} ؛
console.log ('/033 [92m لديه اتصال جديد:/033 [39m' ، المشاركات) ؛
// بعد نجاح اتصال العميل ، سيتم إرسال معلومات الإحداثي الخاصة بالعملاء الآخرين
client.emit ('position.Change' ، posts) ؛
// تلقي العميل يرسل رسالة
client.on ('position.change' ، function (msg) {
// حاليا ، رسالة العميل هي فقط رسالة تنسيق
البشرات [client.id] = msg ؛
// بث رسائل لجميع العملاء الآخرين
إذاعة({
النوع: "الموضع" ،
Post: MSG ،
معرف: Client.id
}، عميل)؛
}) ؛
// استقبال رسالة اتصال إغلاق العميل
client.on ('Close' ، function () {
console.log ('Close!') ؛
// حذف العميل وإخطار العملاء الآخرين
حذف البشرات [client.id] ؛
// بث رسائل لجميع العملاء الآخرين
إذاعة({
النوع: "فصل" ،
معرف: Client.id
}، عميل)؛
}) ؛
// افصل
client.on ('disconnect' ، function () {
console.log ('disconnect!') ؛
// حذف العميل وإخطار العملاء الآخرين
حذف البشرات [client.id] ؛
// بث رسائل لجميع العملاء الآخرين
إذاعة({
النوع: "فصل" ،
معرف: Client.id
}، عميل)؛
})
// تحديد معالجة استثناء العميل
client.on ('error' ، function (err) {
console.log ('error->' ، err) ؛
})
}) ؛
النقطة الرئيسية لتحليل الكود أعلاه هي
1. يتم توصيل العميل الجديد بنجاح ، ويتم إرسال معلومات الإحداثيات للعملاء الآخرين.
2. عندما يقوم العميل بتحديث معلومات الإحداثيات ، أبلغ العملاء الآخرين.
3. العميل يفصل ويبلغ العملاء الآخرين
4. تنقسم أنواع رسائل البث إلى تعديل إحداثيات وإزالة الإحداثيات
اكتب صفحة HTML العميل
نظرًا لأن Socket.io هو إطار مخصص ، يحتاج العميل إلى الرجوع إلى Socket.io.js. يمكن العثور على JS هذا من وحدة Socket.io. المسار عمومًا node_modules/socket.io/node_modules/socket.io-client/dist. هناك نسختان من الدمج والضغط. يمكنك استخدام نسخة الدمج أثناء التطوير.
الرمز الكامل كما يلي:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> socket.io مثال على التفاعل عبر الإنترنت في وقت واحد </title>
<meta charset = "utf-8">
</head>
<body>
<script type = "text/javaScript" src = "socket.io.js"> </script>
<script type = "text/javaScript">
var ws = io.connect ('http: // localhost: 9091/') ؛
var isfirst ؛
ws.on ('connect' ، function () {
console.log (WS) ؛
// ابدأ في ربط حدث Mousemove
document.onmousemove = function (ev) {
if (ws.socket.transport.isopen) {
ws.emit ('position.change' ، {x: ev.clientx ، y: ev.clienty}) ؛
}
}
})
ws.on ('position.change' ، function (data) {
// ابدأ عبر الإنترنت في نفس الوقت
if (! isFirst) {
isfirst = صحيح ؛
// الرسالة الأولى هي تلقي إحداثيات لجميع العملاء الآخرين
لـ (var i in data) {
تحرك (i ، البيانات [i]) ؛
}
}آخر{
// وإلا ، فهي إما رسالة منفصلة أو رسالة يتم تحديثها.
إذا ('موضع' == data.type) {
نقل (data.id ، data.post) ؛
}آخر{
إزالة (data.id) ؛
}
}
})
ws.on ('خطأ' ، function () {
console.log ('error:' ، ws) ؛
Ws.Disconnect () ؛
})
وظيفة التحرك (معرف ، نقاط) {
var eLe = document.queryselector ('#cursor_' + id) ؛
إذا (! ele) {
// إذا لم يكن موجودًا ، فسيتم إنشاؤه
eLe = document.createElement ('img') ؛
ele.id = 'cursor_' + id ؛
ele.src = 'img/cursor.png' ؛
ele.Style.position = 'absomute' ؛
document.body.appendchild (eLE) ؛
}
ele.style.left = pos.x + 'px' ؛
ele.style.top = pos.y + 'px' ؛
}
وظيفة إزالة (معرف) {
var eLe = document.queryselector ('#cursor_' + id) ؛
ele.parentnode.removechild (ELE) ؛
}
</script>
</body>
</html>
يمكن العثور على img/cursor.png على الصفحة هنا ، cursor.png ، وهناك العديد من أيقونات الماوس الأخرى هنا. مبدأ الواجهة الأمامية بسيط نسبيًا. التحليل البسيط على النحو التالي
1. عندما يكون الاتصال ناجحًا ، قم بربط حدث MouseMove على الصفحة ، وأرسل رسالة إحداثي جديدة.
2. استلمت الرسالة وفقًا لنوع الرسالة ، هل من الضروري تعديل رسائل العميل الأخرى أو إزالة رسائل العميل الأخرى؟
3. تحديد إضافة أيقونات مؤشر العميل الأخرى وإزالة أيقونات المؤشر
4. معالجة رسائل استثناء العميل وأضف قطع الاتصال للسماح للخادم بإزالة معلومات الإحداثيات
مثال تشغيل
1. احفظ رمز الخادم مثل io_multigame.js
2. احفظ رمز العميل كـ IO_Multigame.html
3. قم بتشغيل عقدة رمز الخادم io_multigame.js
4. فتح صفحات متعددة IO_Multigame.html لمعرفة التأثير
لخص
الكتابة غير رسمية للغاية والمراجع إلى Nodejs المذهلة. هذا كتاب جيد. يمكن للأصدقاء الذين يرغبون في معرفة Nodejs قراءة هذا الكتاب.