การใช้งานการโต้ตอบข้อมูล HTML5-Websocket โดยใช้วิธีการระยะไกลการโทร

ความคิดเห็น: โดยทั่วไปข้อมูลผู้ใช้ที่ลงทะเบียนบนหน้าเว็บแบบดั้งเดิมจะถูกส่งไปยังหน้าผ่านโพสต์หรือ AJAX หลังจากป้อน HTML5 เรามีวิธีอื่นในการโต้ตอบกับข้อมูลผ่าน WebSocket เราจะแนะนำรายละเอียดต่อไป เพื่อนที่จำเป็นต้องรู้สามารถอ้างถึงได้

โดยทั่วไปข้อมูลผู้ใช้ที่ลงทะเบียนในหน้าเว็บแบบดั้งเดิมจะถูกส่งไปยังหน้าผ่านโพสต์หรือ AJAX หลังจาก HTML5 เรามีวิธีอื่นในการโต้ตอบกับข้อมูลผ่าน WebSocket WebSocket มีความยืดหยุ่นที่หน้าเว็บแบบดั้งเดิมไม่มีในการโต้ตอบข้อมูล หลังจากสร้างการเชื่อมต่อที่ยาวนานผ่าน WebSocket เซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ได้โดยตรง ไม่จำเป็นต้องนำข้อมูลส่วนหัว HTTP จำนวนมากสำหรับการโต้ตอบข้อมูลแต่ละครั้ง โปรโตคอล WebSocket นั้นรองรับข้อความและสตรีมข้อมูลสองรูปแบบ มันง่ายมากที่จะโต้ตอบกับ JavaScript ผ่านข้อความ JSON การสื่อสารระหว่าง JSON และ WebSocket นั้นสะดวกมาก แต่เพื่อให้บรรลุความสะดวกนี้เรายังต้องทำบรรจุภัณฑ์ง่ายๆ โชคดีที่ส่วนประกอบ JSON ที่มีอยู่บนแพลตฟอร์มต่าง ๆ ค่อนข้างเติบโต โดยการวิเคราะห์วิธีการที่สอดคล้องกันของการแมปข้อมูล JSON ไปยังเซิร์ฟเวอร์มันจะดำเนินการ

ต่อไปนี้คือการลงทะเบียนผู้ใช้อย่างง่ายเพื่อสะท้อนกระบวนการของ HTML5 ที่มีปฏิสัมพันธ์กับ JOSN และ WebSocket เนื่องจากมันถูกห่อหุ้มจึงสะดวกในการใช้งาน

html:

ฟังก์ชั่นนั้นง่ายมากและข้อมูลการลงทะเบียนจะถูกส่งหลังจากเชื่อมต่อกับบริการ WebSocket แน่นอนว่าเพื่อให้มีความยืดหยุ่นมากขึ้นเราจะเปิดรูปแบบการเชื่อมต่ออีกครั้งเมื่อตรวจสอบการเชื่อมต่อจะปิด รหัส JS เฉพาะมีดังนี้:

ฟังก์ชั่นเชื่อมต่อ () {

channel = new tcpChannel ();

channel.connected = function (evt) {

$ ('#dlgconnect'). กล่องโต้ตอบ ('ปิด');

-

channel.disposed = function (evt) {

$ ('#dlgconnect'). กล่องโต้ตอบ ('เปิด');

-

channel.error = function (evt) {

การแจ้งเตือน (EVT);

-

channel.connect ($ ('#txthost'). val ());

-

รหัสมีความกระชับมากหรือไม่? เหตุผลหลักคือ TCPChannel ถูกห่อหุ้มบนพื้นฐานของ WebSocket สามารถดาวน์โหลดรหัสโดยละเอียดและเข้าใจได้ หลังจากการเชื่อมต่อสำเร็จคุณจะป้อนแบบฟอร์มลงทะเบียน

หลังจากกรอกข้อมูลการลงทะเบียนบางอย่างให้คลิกลงทะเบียนเพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ผ่าน WebSocket รหัส JS ที่ส่งที่เกี่ยวข้องมีดังนี้:

var invokeregister = {url: 'handler.onregister', พารามิเตอร์: {ชื่อผู้ใช้: '', อีเมล: '', รหัสผ่าน: ''}};

ฟังก์ชั่นลงทะเบียน () {

$ ('#frmregister'). แบบฟอร์ม ('ส่ง', {

onsubmit: function () {

var isvalid = $ (this) .form ('ตรวจสอบ');

ถ้า (isvalid) {

Invokeregister.parameters = $ ('#frmregister'). serializeObject ();

channel.send (Invokeregister, function (ผลลัพธ์) {

การแจ้งเตือน (result.data);

-

-

กลับเท็จ;

-

-

-

เมื่อข้อมูลการตรวจสอบสำเร็จจะสามารถส่งวัตถุคำอธิบายการโทรวิธีผ่าน TCPChannel URL คือวิธีการคลาสที่ระบุในการเรียกและพารามิเตอร์เป็นพารามิเตอร์ของวิธีการและพารามิเตอร์อาจเป็นประเภทโครงสร้างที่ซับซ้อน พารามิเตอร์ที่สองคือการประมวลผลการโทรกลับ

C#

บริการขึ้นอยู่กับการประมวลผลส่วนขยายของด้วงดังนั้นรหัสจึงง่ายมาก รหัสวิธีตรรกะสำหรับการลงทะเบียนข้างต้นมีดังนี้:

ผู้ดูแลชั้นเรียนสาธารณะ

-

สตริงสาธารณะ onregister (ชื่อผู้ใช้สตริง, อีเมลสตริง, รหัสผ่านสตริง)

-

Console.WriteLine (ชื่อผู้ใช้);

Console.WriteLine (อีเมล);

Console.WriteLine (รหัสผ่าน);

คืนชื่อผู้ใช้;

-

-

วิธีการนี้จำเป็นต้องกำหนดพารามิเตอร์ที่เกี่ยวข้องเท่านั้น คอนโทรลเลอร์ขยายข้อความของ Beetle จะวิเคราะห์ข้อมูล JSON ที่ส่งโดย JS โดยอัตโนมัติสำหรับการวิเคราะห์และเชื่อมโยงกับวิธีการที่เกี่ยวข้องสำหรับการดำเนินการ สามารถรับรหัสโดยละเอียดของคอนโทรลเลอร์ผ่านการดาวน์โหลด หลังจากตรรกะเสร็จสิ้นเราจะต้องเปิดบริการ WebSocket ที่เกี่ยวข้องเท่านั้น

-

โมฆะคงที่หลัก (สตริง [] args)

-

Beetle.Controllers.Controller.Register (ใหม่ Handler ());

tcputils.setup ("ด้วง");

โปรแกรมเซิร์ฟเวอร์ = โปรแกรมใหม่ ();

Server.Open (8088);

Console.WriteLine ("WebSocket Start@8088");

System.threading.thread.sleep (-1);

-

Void Onerror ที่ได้รับการป้องกัน (ผู้ส่งวัตถุ, ChannelerRoreVentArgs E)

-

base.onerror (ผู้ส่ง, e);

Console.WriteLine (E.Exception.message);

-

ได้รับการป้องกันการแทนที่โมฆะ onconnected (ผู้ส่งวัตถุ, ChannelEventArgs E)

-

base.onconnected (ผู้ส่ง, e);

Console.WriteLine ("{0} เชื่อมต่อ", e.channel.endpoint);

-

ได้รับการป้องกันการแทนที่โมฆะ ondisposed (ผู้ส่งวัตถุ, channeldisposedeventargs e)

-

base.ondisposed (ผู้ส่ง, e);

Console.WriteLine ("{0} กระจาย", e.channel.endpoint);

-

-

การโต้ตอบและการประมวลผลข้อความ WebSocket Object ประเภทนี้ตาม HTML5 เสร็จสมบูรณ์และจำเป็นต้องใช้รหัสจำนวนเล็กน้อยเพื่อใช้การประมวลผลข้อมูลปฏิสัมพันธ์ของ JS และบริการ เพื่อให้ได้ฟังก์ชั่นการโต้ตอบที่สะดวกนี้ไม่สามารถบันทึกการห่อหุ้มต่อไปนี้ได้ การวิเคราะห์โปรโตคอล WebSocket, การประมวลผลวัตถุ JSON และการกระจายการควบคุมข้อความ หากคุณต้องการทราบรายละเอียดที่เกี่ยวข้องคุณสามารถดาวน์โหลดซอร์สโค้ดเพื่อดูได้

websocket.server.rar (641.79 kb)