SignalR - สร้างระบบ Broadcast สำหรับ ASP.NET แบบง่ายสุดๆ

image

เคยคิดอยากจะเขียนเกมออนไลน์บนหน้าเว็บด้วย HTML บ้างไหมครับ? หรืออยากจะ Sync ข้อมูลระหว่าง Client ที่เปิดอยู่ทั้งหมด? หรืออยากจะสร้างระบบ Broadcast หรือ Chat บนเว็บ? ด้วย Framework ที่ชื่อ SinalR นี่ และความรู้เรื่อง jQuery เล็กๆ น้อยๆ จะช่วยให้คุณสร้างอะไรพวกนั้นได้ง่ายๆ ด้วยโค๊ดไม่เกิน 20 บรรทัดครับ!

จากตัวอย่างนี้ ผมจะให้ User ลาก กล่องสีแดง และกล่องสีแดงนี้ ขยับไปอยู่ตำแหน่งเดียวกันทุกๆ Server ทำยังไง ลองมาดูกัน

อย่างแรกเลย สร้าง Project แบบ ASP.NET Empty Web Application ขึ้นมาก่อนครับ

จากนั้นใช้ NuGet ดาวน์โหลดแพคเกจ SignalR ออกมาก่อน ถ้ายังไม่เคยลง Nuget ไปลงได้แล้ว ที่ http://nuget.codeplex.com/

image

จากนั้น หา Package SignalR

image

จากนั้น ลง jQueryUI ด้วย

image

สร้างหน้า HTML ใหม่ ชื่อว่า Test.html แล้วกัน แล้วลากไฟล์ JavaScript เหล่านี้ ไปวางในหน้า HTML เพื่อ สร้าง Script Tag

image

จากนั้นเพิ่ม Script Tag

image

แล้วก็ใส่ HTML ว่า

<body>
    <div id="shape" style="width:100px; height: 100px; background-color: Red"></div>
    <div id="logs"></div>

จากนั้น เพิ่ม Script นิดหน่อย

<script type="text/javascript">
    var hub = $.connection.moveShape; //initialize
    var $shape = $("#shape");

    $.extend(hub, {

        // function ที่ Server เรียกมา
              shapeMoved: function (cid, x, y)
        {
            if (cid !== $.connection.hub.id) {
                $shape.css({ left: x + "px", top: y + "px" });
                $("#logs").append("from server: " + x + "," + y + "<br/>");
            }
        }

    });

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

        $shape.draggable({
            drag: function (event, ui) {
                // function บน Server ที่เราจะเรียกไป
                            hub.moveShape( $.connection.hub.id, $shape.offset().left, $shape.offset().top);
            }
        });

    });

    
</script>

จากนั้น เราก็ต้องไปเพิ่มคลาสที่เรียกว่า “Hub” เป็นคลาสที่จะเก็บฟังก์ชั่น ที่ Client จะเรียกเรามา

image

จากนั้น ใส่โค๊ดดังนี้

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR.Hubs;

namespace SignalRTest
{
    [HubName("moveShape")]
    public class Broadcast : Hub
    {
        public void MoveShape( string id, string x, string y )
        {
            Clients.shapeMoved(id, x, y);
        }
    }
}

สังเกตว่า

  • HubName จะเป็นชื่อเดียวกันกับตัวแปร hub (var hub = $.connection.moveShape; )
  • และ shapeMoved จะเป็นฟังก์ชั่นที่เรา Extend ขึ้นมา

 

จากนั้น รันได้เลยครับ ลองเปิดหน้า Browser 2 หน้าพร้อมกัน แล้วลองลากหน้าสี่เหลี่ยมบนหน้าจอ Browser จากหน้าจอใดหน้าจอหนึ่ง อีกหน้าก็จะขยับตามไปด้วย คราวนี้ก็ขึ้นอยู่กับคุณแล้วละ ว่าจะเอามันไปทำอะไร Smile