تعليق: بشكل عام ، يتم تقديم معلومات المستخدم المسجلة على صفحات الويب التقليدية إلى الصفحة من خلال Post أو Ajax. بعد إدخال HTML5 ، لدينا طريقة أخرى للتفاعل مع البيانات من خلال WebSocket. سوف نقدمها بالتفصيل بعد ذلك. يمكن للأصدقاء الذين يحتاجون إلى معرفته أن يشير إليها.
بشكل عام ، يتم تقديم معلومات المستخدم المسجلة في صفحات الويب التقليدية إلى الصفحة من خلال Post أو Ajax. بعد HTML5 ، لدينا طريقة أخرى للتفاعل مع البيانات من خلال WebSocket. يتمتع WebSocket بالمرونة التي لا تتمتع بها صفحات الويب التقليدية في تفاعل البيانات. بعد إنشاء اتصال طويل من خلال WebSocket ، يمكن للخادم إرسال البيانات مباشرة إلى العميل. ليست هناك حاجة لجلب كمية كبيرة من معلومات رأس HTTP لكل تفاعل بيانات. يدعم بروتوكول WebSocket نفسه نصًا ودفقات تنسيق بيانات. من السهل جدًا التفاعل مع JavaScript من خلال نص JSON. التواصل بين JSON و WebSocket مريح للغاية ، ولكن لتحقيق هذه الراحة ، لا يزال يتعين علينا صنع عبوات بسيطة. لحسن الحظ ، فإن مكونات JSON الحالية على منصات مختلفة ناضجة نسبيًا. من خلال تحليل الطرق المقابلة لتخطيط بيانات JSON إلى الخادم ، يتم تنفيذها.
فيما يلي تسجيل مستخدم بسيط لتعكس عملية التفاعل HTML5 مع JOSN و WebSocket. نظرًا لأنه تم تغليفه ، فهو مناسب جدًا للاستخدام.
HTML:الوظيفة بسيطة للغاية ، ويتم تقديم معلومات التسجيل بعد الاتصال بخدمة WebSocket. بالطبع ، لكي نكون أكثر مرونة ، نعيد فتح نموذج الاتصال عند مراقبة الاتصال. رمز JS المحدد كما يلي:
وظيفة الاتصال () {
القناة = جديد tcpChannel () ؛
channel.connected = function (evt) {
$ ('#dlgconnect'). مربع الحوار ('Close') ؛
} ؛
channel.disposed = function (evt) {
$ ('#dlgconnect'). مربع الحوار ('Open') ؛
} ؛
channel.error = function (evt) {
تنبيه (EVT) ؛
} ؛
channel.connect ($ ('#txthost'). val ()) ؛
}
هل الرمز موجز للغاية؟ السبب الرئيسي هو أن tcpchannel مغلفة على أساس WebSocket. يمكن تنزيل الكود التفصيلي وفهمه. بعد نجاح الاتصال ، يمكنك إدخال نموذج التسجيل.
بعد ملء بعض معلومات التسجيل ، انقر فوق تسجيل لإرسال المعلومات إلى الخادم من خلال WebSocket. رمز JS المقدم ذي الصلة كما يلي:
var invokeregister = {url: 'handler.onregister' ، المعلمات: {username: '' ، البريد الإلكتروني: '، كلمة المرور:' '}} ؛
سجل الوظيفة () {
$ ('#frmregister'). نموذج ('إرسال' ، {
onsubmit: function () {
var isValid = $ (this) .form ('Valate') ؛
إذا (isValid) {
invokeregister.parameters = $ ('#frmregister'). serializeObject () ؛
channel.send (invokeregister ، function (result) {
تنبيه (نتيجة. data) ؛
}) ؛
}
العودة كاذبة
}
}) ؛
}
عندما تنجح بيانات التحقق ، يمكنها إرسال كائن وصف استدعاء الطريقة من خلال TCPChannel. عنوان URL هو طريقة الفئة المحددة للاتصال ، والبراميرات هي المعلمة للطريقة ، ويمكن أن تكون المعلمات أيضًا أنواع بنية معقدة. المعلمة الثانية هي معالجة رد الاتصال.
ج#تعتمد الخدمة على معالجة تمديد Beetle ، وبالتالي فإن الكود بسيط للغاية. رمز طريقة المنطق للتسجيل أعلاه هو كما يلي:
معالج الطبقة العامة
{
السلسلة العامة OnRregister (اسم مستخدم السلسلة ، البريد الإلكتروني السلسلة ، كلمة مرور السلسلة)
{
console.writeline (اسم المستخدم) ؛
console.writeline (البريد الإلكتروني) ؛
console.writeline (كلمة المرور) ؛
إرجاع اسم المستخدم ؛
}
}
تحتاج الطريقة فقط إلى تحديد المعلمات ذات الصلة. ستقوم وحدة تحكم تمديد رسالة Beetle بتحليل بيانات JSON تلقائيًا المقدمة من JS للتحليل وربطها بالطرق ذات الصلة للتنفيذ. يمكن أيضًا الحصول على الكود التفصيلي لوحدة التحكم من خلال التنزيل. بعد اكتمال المنطق ، نحتاج فقط إلى فتح خدمة WebSocket ذات الصلة.
{
باطل ثابت رئيسي (سلسلة [] args)
{
beetle.controllers.controller.register (New Handler ()) ؛
tcputils.setup ("Beetle") ؛
برنامج البرنامج = برنامج جديد () ؛
server.Open (8088) ؛
console.writeline ("WebSocket START@8088") ؛
System.Threading.Thread.sleep (-1) ؛
}
Override Void onerror المحمي (مرسل الكائن ، ChannelerRorerRoreventArgs e)
{
base.onerror (المرسل ، ه) ؛
console.writeline (E.Exception.Message) ؛
}
Outdride Void Onconnected (مرسل الكائن ، ChannelVentArgs E)
{
base.onconnected (المرسل ، ه) ؛
console.writeline ("{0} متصل" ، e.channel.endpoint) ؛
}
التجاوز المحمي باطل onDisposed (مرسل الكائن ، قناة disposposedeventargs e)
{
base.ondisposed (المرسل ، ه) ؛
console.writeline ("{0} distributed" ، e.channel.endpoint) ؛
}
}
تم الانتهاء من هذا النوع من تفاعل رسالة كائن WebSocket ومعالجته بناءً على HTML5 ، ولا يلزم سوى كمية صغيرة من التعليمات البرمجية لتنفيذ معالجة تفاعل البيانات لـ JS والخدمات. لتحقيق وظيفة التفاعل المريحة هذه ، لا يمكن حفظ التغليف التالي. تحليل بروتوكول WebSocket ، كائن JSON معالجة وتوزيع التحكم في الرسائل ؛ إذا كنت تريد معرفة التفاصيل ذات الصلة ، فيمكنك تنزيل الكود المصدر لعرضه.websocket.server.rar (641.79 كيلو بايت)