MSITBlog

5 minutes reading time (1048 words)

Real-time ASP.NET with SignalR

SignalR คืออะไร?

SignalR คือ Software library ที่พัฒนาขึ้นมาโดย Microsoft ถูกออกแบบมาให้ใช้งานร่วมกับ ASP.NET Web Application ความสามารถของ SignalR คือการทำให้ Web Application สามารถรับ-ส่งข้อมูลแบบ Real-time ได้ โดยไม่ต้อง Refresh หน้าจอ

SignalR เป็น Open source มีทั้ง .net framework version และ .net core version ทำให้ SignalR สามารถใช้งานได้ทั้งในฝั่งของ Windows และ Linux

Application ที่เหมาะกับ SignalR

  • Chat
  • Dashboard
  • Map
  • Game

การทำงานของ SignalR

ทางฝั่ง Web Server จะมี Hub ที่ทำงานอยู่ตลอดเวลา ซึ่ง Hub นี้จะทำหน้าที่รอรับข้อมูลจาก Client ที่ส่งมา และจะทำการส่งข้อมูลนั้นไปยังทุกๆ Client ที่เชื่อมต่ออยู่ในขณะนั้น โดยที่ Client ไม่ต้อง Refresh หน้าบราวเซอร์ ลักษณะการทำงานจะเป็นดังรูปด้านล่างนี้

SignalR ช่วยลดความยุ่งยากในการเขียนโปรแกรมแบบ Real-time โดยปกติถ้าเราต้องการเขียนโปรแกรมแบบ Real-time อาจจะต้องใช้วิธีทำงานร่วมกับ jQuery และ Ajax ต่างๆ เพื่อให้ได้ข้อมูลจาก Server อาจจะสร้างเป็น Loop ทำการ Request ไปที่ Server ทำให้เกิดการทำงานซ้ำๆ ทำให้ Server ทำงานหนัก Network Bandwidth สูง และ Performance ที่ได้ค่อนข้างต่ำมาก

SignalR ถูกออกแบบมาให้รองรับการทำงานบนพื้นฐาน HTTP และ HTTPS เดิม และยังรองรับ Transports หลายตัวโดยที่ developer ไม่ต้องเขียน code implement เอง SignalR จะเลือกใช้ WebSockets ก่อนเป็นอันดับแรก แต่ถ้า Server ไม่รองรับก็จะเลือกใช้ Transport ตัวถัดไปแทน โดยเรียงลำดับตามรูปด้านล่างนี้

  • WebSockets เป็นการเชื่อมต่อเป็น 2 ทิศทาง โดยจะรัน Service ที่ทำหน้าที่เป็น Protocol ที่ฝั่ง Server เมื่อมี Client ทำการเชื่อมต่อเข้ามา Service ตัวนี้ก็จะติดตาม Client เพื่อตรวจสอบว่า Client ยังทำการเชื่อมต่ออยู่และพร้อมที่จะรับ-ส่งข้อมูลให้ตลอดเวลา เมื่อฝั่ง Server มีข้อมูลมาใหม่ๆ ตัว Service นี้ก็จะทำหน้าที่ Push ข้อมูลเพื่อส่งให้กับทุกๆ Client ที่เชื่อมต่ออยู่ในขณะนั้นWebSockets

 

  • Server-sent Events หรือ EventSource เป็นวิธีการที่ใช้ส่งข้อมูลจาก Web Server ไปยัง Client ทางเดียวอย่างต่อเนื่องเรื่อยๆ โดยอาศัย HTTP Protocol เป็นพื้นฐาน และเปิดการเชื่อมต่อค้างเอาไว้Server-sent Event

 

  • Forever Frame เป็นวิธีเฉพาะสำหรับ Internet Explorer โดยการสร้าง hidden iframe ไว้เพื่อเป็นช่องทางในการรับ-ส่งข้อมูลระหว่าง Server กับ ClientForever Frame

 

  • Ajax Long Polling วิธีการคือใช้การต่อแบบ Ajax แต่ฝั่ง server จะใช้ฟังค์ชั่น พวก while กับ sleep ทำการหน่วงเวลาเพื่อทำการตรวจสอบงานก่อนจะส่งผล เพราะงานนั้นๆ อาจจะทำงานช้าหรือเข้าคิว ทีนี้โดยตามปกติ Ajax Long Polling จะไม่หน่วงเวลา request นั้นๆ ยาวจนเกินไป เพราะส่วนมาก browser จะตัด connection ทิ้งไปซะก่อน เมื่อถึงช่วงหนึ่งควรคืน response ไป แล้ว JavaScript ต้องทำการ reconnect Ajax ทันที จนกว่าจะได้ผลลัพท์การทำงานที่แท้จริงตาม app logic นั้นๆ

    Ajax Long Polling

 

ตัวอย่างการใช้งาน SignalR กับ ASP.NET MVC

1. เปิด Visual Studio เลือก New Project ASP.NET Web Application (.NET Framework) ตั้งชื่อ Project เสร็จแล้วกด OK

2. เลือก Change Authentication.

 

3. ในหน้า Change Authentication เลือก No Authentication แล้วกด OK

4. ใน Solution Explorer คลิกขวาที่ Project และเลือก Add > New Item.

5. ใน Add New Item — SignalRChat เลือก Installed > Visual C# > WebSignalR และเลือก SignalR Hub Class (v2).

6. ตั้งชื่อ class ChatHub และกด add 

7. แทนที่ Code ใน ChatHub.cs ด้วย Code ด้านล่างนี้

using System;

using System.Web;

using Microsoft.AspNet.SignalR;

namespace SignalRChat

{

    public class ChatHub : Hub

    {

        public void Send(string name, string message)

        {

            // Call the addNewMessageToPage method to update clients.

            Clients.All.addNewMessageToPage(name, message);

        }

    }

}

8. ที่ Solution Explorer คลิกขวาที่ Project แล้วเลือก Add > Class

9. ตั้งชื่อ Class Startup แล้วกด Add

10. แทนที่ Code ใน Startup.cs ด้วย Code ด้านล่างนี้

using Owin;

using Microsoft.Owin;

[assembly: OwinStartup(typeof(SignalRChat.Startup))]

namespace SignalRChat

{

    public class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            // Any connection or hub wire up and configuration should go here

            app.MapSignalR();

        }

    }

}

11. ใน Solution Explorer เลือก HomeController.cs

12. เพิ่ม Method ใน HomeController ตาม Code ด้านล่างนี้

public ActionResult Chat()

{

    return View();

}

13. ใน Solution Explorer คลิกขวาที่ View > Home และเลือก Add View

14. ใน Add View ตั้งชื่อ Chat เสร็จแล้วกด Add

15. แทนที่ Code ใน Chat.cshtml ตาม Code ด้านล่างนี้

@{

    ViewBag.Title = "Chat";

}

<h2>Chat</h2>

<div class="container">

    <input type="text" id="message" />

    <input type="button" id="sendmessage" value="Send" />

    <input type="hidden" id="displayname" />

    <ul id="discussion">

    </ul>

</div>

@section scripts {

    <!--Script references. -->

    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->

    <!--Reference the SignalR library. -->

    <script src="/~/Scripts/jquery.signalR-2.1.0.min.js"></script>

    <!--Reference the autogenerated SignalR hub script. -->

    <script src="/~/signalr/hubs"></script>

    <!--SignalR script to update the chat page and send messages.--> 

    <script>

        $(function () {

            // Reference the auto-generated proxy for the hub.  

            var chat = $.connection.chatHub;

            // Create a function that the hub can call back to display messages.

            chat.client.addNewMessageToPage = function (name, message) {

                // Add the message to the page. 

                $('#discussion').append('<li><strong>' + htmlEncode(name) 

                    + '</strong>: ' + htmlEncode(message) + '</li>');

            };

            // Get the user name and store it to prepend to messages.

            $('#displayname').val(prompt('Enter your name:', ''));

            // Set initial focus to message input box.  

            $('#message').focus();

            // Start the connection.

            $.connection.hub.start().done(function () {

                $('#sendmessage').click(function () {

                    // Call the Send method on the hub. 

                    chat.server.send($('#displayname').val(), $('#message').val());

                    // Clear text box and reset focus for next comment. 

                    $('#message').val('').focus();

                });

            });

        });

        // This optional function html-encodes messages for display in the page.

        function htmlEncode(value) {

            var encodedValue = $('<div />').text(value).html();

            return encodedValue;

        }

    </script>

}

16. ที่ Solution Explorer ใน Folder Scripts ให้ตรวจสอบว่ามี Scripts Libraries ของ jQuery และ SignalR แล้วหรือยัง ถ้ายังไม่มีให้ทำการติดตั้งให้เรียบร้อยก่อน

17. ตรวจสอบว่า Script references ด้านบนของ Page มีเวอร์ชั่นที่ตรงกันกับ Script files ใน Project

<!--Script references. -->

<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->

<!--Reference the SignalR library. -->

<script src="/~/Scripts/jquery.signalR-2.1.0.min.js"></script>

18. Run Project และ Copy URL ในหลายๆ Browser ทดสอบการส่งข้อความหากัน ข้อความจะแสดงผลพร้อมกันในทุกๆ Browser

 

SignalR with WebSocket in WireShark

 

เมื่อ SignalR hub ที่ฝั่ง Client ทำงาน จะมีการ Request ไปที่ Server เพื่อขอทำการ Switch Protocol จาก HTTP เป็น WebSocket

 

ถ้า Server รองรับ WebSocket Protocol ก็จะส่ง Status กลับไป Client ว่า Switching Protocol

 

เมื่อเชื่อมต่อเรียบร้อย SignalR ก็จะใช้ WebSocket Protocol ในการส่งข้อมูลกันระหว่าง Server กับ Client

 

 

รายชื่อผู้เขียนบทความ

 1. นายวีระชาติ ตาลยงค์          รหัสนักศึกษา 6217810005

 2. นายวัชรินทร์ สมสุข             รหัสนักศึกษา 6217810006

 3. นายภูรีภัทร โสตถิรัตนพันธุ์    รหัสนักศึกษา 6217810014

 4. นายอธิพร พุ่มนิคม              รหัสนักศึกษา 6217810016

เอกสารอ้างอิง

- http://wiki.predestined.de/doku.php/it:fhnw:dnead:signalr

- http://enterprisewebbook.com/ch8_websockets.html

- https://raweetong.blogspot.com/2014/08/qqq.html

- https://chavp.wordpress.com/2013/09/11/ √È“ß-web-app-·∫∫-real-time-¥È«¬-asp-net-mvc-4-signalr-·≈–-rabbitmq-action/

- https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introduction-to-signalr

- https://en.wikipedia.org/wiki/WebSocket

 

หลักการทำงานของโปรแกรม AnyDesk
ตรวจสอบ Traffic ในองค์กรด้วย ElasticFlow กัน

Related Posts

 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Thursday, 20 February 2020