ASP.NET SignalR 101 ลงมือเขียนจริง

best0032001
Sep 6, 2018 · 3 min read

ในblog นี้จะเป็นวิธีการเขียน SignalR ซึ่งเป็น Tool libraryในการทำ
Web Realtime Sync ไว้update หน้า web โดนไม่ต้องรอ Refresh web
ซึ่งได้เขียน intro การทำงานไปแล้ว ในblog ก่อน
อ่านย้อนได้ที่ link

ขั้นแรกให้เรา สร้าง Web project asp.net ขึ้นมาก่อน

จากนั้นทำการ เข้าไปที่ Nuget เพื่อติดตั้ง SignalR library

ติดตั้งแล้ว จะมี script ที่จำเป็นติดตั้งเข้ามาในProject

หลังจากที่เราติดตั้ง SignalR libraryเสร็จแล้วถ้าเรา ลองrun Project
จะพบว่า จะติด Error Owin ไม่สามารถ Run ได้ต้องทำการ Setup config Project ก่อน

จากนั้นให้สร้าง class Startup เข้าไปใน web project

จากนั้น Code ตามนี้

จุดสำคัญคือ OwinStartupAttribute จะต้องแก้ typeof ในตรงกับ namespace
แล้ว .Startup เมื่อ setตามนี้ จะต้อง run webproject ไม่ error

ถ้าทำการติดตั้ง สมบูรณ์เราสามารถ ทดสอบการติดตั้งด้วยการrun
แล้ว พิมพ์ ที่url /signalr/hubs เพื่อดูว่า SignalR ทำงานหรือยัง
ซึ่งจะแสดงผลตามภาพนี้

จากนั้นให้เราสร้าง HomeController ขึ้นมา

จากนั้นทำการสร้าง folder Hubs และ สร้าง Class MyHub เพื่อเตรียมเขียน Hub

ทำการ Code Class Myhub ตามตัวอย่าง

สร้าง folder Model พร้อมสร้าง Class UserHubModels เข้าไป

จากนั้นสร้าง Class DataRepository ไว้ ทำ Data Cache layer

หลังจากเตรียมความพร้อมเสร็จ เราจะเริ่มเขียน ในส่วนแรกคือ
index.cshtml ทำการจัดโครงสร้าง html และ add java script เพื่อใช้ SignalRตามตัวอย่าง

จากนั้นผมจะทำการเพิ่ม Code on click event ให้กับ button

เราจะทำการเขียน logic ดังนี้ เมื่อ กด button register ให้ทำการ
register ไปที่ hub SignalR โดยทำการส่ง ค่า Userid ที่รับจาก text box ส่งไป

โดยCode แรกที่เราจะเพิ่มเข้าไปคือ การ connection กับ Hub
var hub = $.connection.myHub;
.ให้สังเกตุ highlight สีแดง ว่าการตั้งชื่อต้องตรงกับชื่อ Class ของhub

จากนั้นทำการ code จัดการส่วนของ callback
เมื่อ Hub ส่ง data จาก server ว่าโดนได้ประกาศ ชื่อ function callback
ไว้ว่า callreturn เมื่อdata มาถึง callreturn ให้เรียก function set data
เพื่อ update data บนหน้า web

จากนั้นเพิ่ม Code ส่วนว่าพอ connect เสร็จแล้วทำอะไร
เราจะทำการ เรียก function ของHub บน server เพื่ออ่านค่าจาก text box แล้วส่งไป
ที่ function setID()

เพิ่ม function setID ที่ Class myhub เพื่อทำการรับค่าแล้วบันทึกเก็บลง Datarepository

จากนั้นเขียน function callback บน Class myhub ให้ส่ง data ไปที่ callback ที่ชื่อว่า callreturn บน client

จากนั้นลองเขียน action test บน home controller
ให้เรียก function Sendmsg บน MyHub

เมื่อ code เสร็จแล้ว ผลการ run demo ก็ตาม blog นี้ครับ link

    best0032001

    Written by

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade