CoreSharp.net on Facebook

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

Posted 01/03/2012 03:35 by nantcom

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

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

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

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

จากนั้น หา Package SignalR

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

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

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

แล้วก็ใส่ 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 จะเรียกเรามา

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

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

Published Mar 01 2012, 03:35 AM by nantcom

ร่วมให้กำลังใจนักเขียน

อ่านแล้วชอบใจ อยากให้กำลังใจกับผู้แต่งบทความนี้ ขอเชิญร่วมให้กำลังใจผ่าน Paysbuy/Paypal นะครับ ปลอดภัยเพราะทำงานผ่าน SSL และไม่มีค่าใช้จ่ายเพิ่มเติมครับ เว็บเราให้นักเขียน 100% ครับ