รู้จักกับ SignalR และตัวอย่างการเขียน Vote RealTime App ด้วย [Angular + NetCore WebAPI]

ทำ RealTime Application ด้วย NetCore SignalR ร่วมกับ Angular

SignalR คือ Library ตัวนึงที่มีความสามารถทำให้ตัว Server ของ NetCore รองรับสัญญาญจากฝั่ง Client และ Client ก็เปิดท่อรับสัญญาณจาก Server ได้แบบ RealTime โดยไม่ต้อง Refresh หน้าจอกันเลย

ถ้าแค่อ่านบางทีอาจจะจิตนาการไม่ออกว่า การไม่ Refresh มันเป็นยังไง มันก็คล้ายๆกับ การไถ Feed Facebook มี Update Feed ใหม่ มาให้เราดูเรื่อยๆ แบบ Auto หรือ Twitter ก็เช่นกัน นั้นแหละครับมันคือ RealTime Application

ทีนี้เพื่อให้เห็นภาพมากขึ้นไปอีก ผมจะพาไปทำ Voting Application แบบ RealTime ลักษณะของ Application ก็จะเป็นดังภาพด้านล่างนี้

เมื่ออ่าน Blog นี้จบ ทุกคนจะได้ Vote Application Realtime ใช้งานได้จริง แบบ Step By Step แต่นอนครับ มาเริ่มกันเลย

1. โหลดและติดตั้ง SDK ของ NetCore ก่อน ปัจุบันอยู่ที่ Version 5 จาก Link นี้ครับ

https://dotnet.microsoft.com/download

ดาวโหลด NET CORE 5 SDK ดังภาพ

2. เมื่อ Download เสร็จแล้ว กดติดตั้ง Next ๆๆๆ เสร็จแล้ว เปิด Terminal หรือ PowerShell ขึ้นมาแล้วพิมพ์

dotnet --version

เมื่อสำเร็จจะขึ้นดังภาพ

3. เมื่อติดตั้งเสร็จแล้ว หาพื้นที่ว่างสักจุดบนเครื่องของเรา และสร้าง Folder ชื่อว่า RealTimeVotingApp

mkdir RealTimeVotingApp

เมื่อสร้างเสร็จแล้วจะได้ออกมา 1 Folder

4. ถัดมาจะเป็นการสร้าง Project NetCore 5 WebApi ด้วย Command Line ก่อนอื่นให้เราเข้าไปใน Folder ที่ชื่อว่า RealTimeVotingApp ด้วยคำสั่ง

cd RealTimeVotingApp

5. และใช้คำสั่งนี้ในการสร้าง Project NetCore 5 WebApi

dotnet new webapi -o server

เมื่อสร้าง Project สำเร็จจะได้หน้าตาแบบนี้ใน Console

6. เข้าไปใน Folder server ด้วยคำสั่ง

cd server

นี่คือโครงสร้างภายใต้ Folder server ที่ถูก generate sdk

7. ใช้คำสั่งนี้ภายใต้ Folder server เพื่อ Start NetCore Server

dotnet watch run

เมื่อ Start Server สำเร็จจะได้ดังภาพ

default ของ NET Core 5 นั้นจะติดตั้ง Swagger มาให้ด้วย ซึ่ง Swagger ก็คือ Document API ของเรา เราดูหรือ Call API จาก Swagger ได้เลย

หน้าตา Swagger ที่ติดตั้งมาพร้อมกับ Net Core 5

8. ทดลอง Call API ผ่าน Swagger ทำตามภาพ ถ้าผลลัพธ์ออกมา คล้ายกันก็แปลว่า เราสามารถ ใช้งาน Net Core WebApi ได้เต็มรูปแบบแล้วครับ

ถ้าเป็นแบบนี้ตามภาพ ก็แปลว่า เราพร้อมใช้ SignalR แล้วครับ

ทีนี้ถัดมาเราจะเริ่ม นำ SignalR มาใช้ใน NetCore WebApi โดยเริ่มจาก สร้าง Folder Hubs แล้วภายใต้ Folder นั้นให้สร้างไฟล์ชื่อ DataHub.cs โดยไฟล์เมื่อสร้างเสร็จแล้วจะได้หน้าตาประมาณนี้

หน้าตาของไฟล์ DataHub.cs

โดยเมื่อเราสร้างไฟล์นี้เราจะต้อง Extend ตัว Hub ของ SignalR เข้ามาใช้งาน โดยการ Using Microsoft.AspNetCore.SignalR ตามภาพด้วย

โดยเราจะสร้างไฟล์นี้ไว้เปล่าๆ โดยไม่ต้องใส่อะไรไปข้างใน (เดี๋ยวไว้มาต่อรอบหน้าว่าข้างในนี้ควรจะใส่อะไร) โดยความหมายของไฟล์นี้ก็คือ เราจะทำให้ไฟล์นี้ เป็นตัวกลาง สื่อสาร ระหว่าง Client และ Server โดยมีไฟล์ DataHub นี้ต่อท่อขั้นกลางอยู่

การทำงานของ DataHub ที่บอกไปข้างต้นครับ

ถัดมาให้เราเปิดไฟล์ Startup.cs และเพิ่ม Code เหล่านี้ตามภาพทีละ Step

ภาพตัวอย่างไฟล์ Startup.cs

โค้ด Section 1) ทำให้ตัว Server NetCore รู้ว่าเราจะให้แค่ http://localhost:4200 Call มาหาเรา หรือ เปิดท่อมาคุยกับเราได้แค่ URL นี้ URL เดียวเท่านั้น URL อื่นจะ Call มาไม่ได้ (ตั้งกฎ)

โค้ด Section 2) คือการ Apply กฎของโค้ด Section 1) (ใช้งานกฎ)

โค้ด Section 3) คือการบอกว่าเออเนี้ยนะ เรามีท่อตัวกลาง ระหว่าง Client และ Server ชื่อว่า DataHub นะ ดังนั้นถ้า Client จะเปิดท่อคุยกับ Server ให้ Call มาที่ https://localhost:5001/chart นะ

พอได้แบบนี้เสร็จปั๊บ ให้เราสร้างไฟล์ Controller ชื่อ ChartController.cs โดยไฟล์นี้จะมีหน้าตาแบบนี้

อธิบายทีละบรรทัด โดยเริ่มจาก ภาพรวมไฟล์ก่อน ภาพรวมในไฟล์ Controller ของ NetCore นั้นคือ ตัวที่บ่งบอกว่าเราจะ Call API มาที่ Path ไหนใน Controller และเราจะ Response อะไรออกไป เช่น

บรรทัดที่ 8 ) คือการบอกว่าเวลา call เราจะ call มาที่ https://localhost:5001/[controller] นั้นก็หมายถึง https://localhost:5001/Chart แบบนี้

บรรทัดที่ 11 13 15) คือการ Inject Service ชื่อว่า Hub เอามาใช้งานใน Controller ของเรา เอาไว้ส่งอะไรบางอย่างกลับไปหา Client ผ่านท่อที่ชื่อว่า DataHub

บรรทัดที่ 21) คือการส่งข้อมูลที่มีค่าเท่ากับ 5 ผ่านไปใน Hub หรือท่อที่เราจะส่งแบบ RealTime ไปหา Client ส่วนคำว่า “chartStatus1” หมายถึง ที่ฝั่ง Angular จะต้องสร้างสถานี chartStatus1 เพื่อรอรับค่าแบบ RealTime จาก Server เอาไว้ด้วย เดี๋ยวจะพูดในบทถัดไป

ทดลองเปิด URL: https://localhost:5001/swagger จะได้ดังภาพ

จะมีการเพิ่ม API 2 Path ใหม่ขึ้นมา

หลังจากเห็นภาพเดียวกันแล้วลองกด Call ใช้งาน API ทั้งสอง ควรจะได้ผลลัพธ์แบบนี้

ควรจะได้ผลลัพธ์ดังภาพ status: “Send To Graph 1 Completed”

ถ้าได้ผลลัพธ์เดียวกันแล้ว แปลว่าเราสามารถสร้างท่อที่จะส่งข้อมูล RealTime ผ่านไปหา Client หรือ Angular ได้แล้ว ถัดมา เราจะมาเขียน Code ใน Angular เพื่อสร้างสถานี ChartStation เพื่อรับข้อมูลที่ส่งมาจาก Server แบบ RealTime กัน

วิธีการติดตั้ง Angular เข้าไปอ่านคู่เมื่อและติดตั้งที่ Link ด้านล่าง

Angular CLI

เมื่อติดตั้งได้แล้วเปิด Terminal และลองใช้คำสั่งนี้

ng --version

ผลลัพธ์ที่ควรจะได้ออกมาคือเลข Version ของ Angular CLI ที่ติดตั้ง ดังภาพ

เมื่อติดตั้ง Angular สมบูรณ์จะได้ ดังภาพนี้

โอเคเมื่อติดตั้งเสร็จแล้วใช้คำสั่งนี้เพื่อสร้าง Project Angular

[กลับมาที่ root ของ project: realtimegraph]
ng new client

ภาพขณะกำลังสร้าง Project Angular

เมื่อสร้างเสร็จแล้วจะได้ File Structure ที่มีโครงสร้างดังภาพนี้

ภาพโครงสร้าง Angular Project

ลองใช้คำสั่งนี้เพื่อ Start Angular

ng serve

เปิด Browser และเข้า Link => http://localhost:4200

ถ้าได้หน้าจอแบบนี้แปลว่าติดตั้ง Project Angular สมบูรณ์

ถัดมาเราจะสร้างหน้า หน้านึงขึ้นมาใน Angular ชื่อว่า ChartComponent โดยใช้คำสั่ง

ng generate component components/Chart

เมื่อ run command แล้วเราจะได้ไฟล์ 4 ไฟล์ ตามภาพนี้

เมื่อทำตาม Command จะได้ไฟล์ 4 ไฟล์ตามภาพ

พอเราได้ ChartComponent เสร็จแล้ว เราจะเข้าถึงหน้า ChartComponent ได้เราก็ต้องสร้าง Routing ไปหา ChartComponent โดยการเปิดไฟล์ชื่อ app-routing.module.ts และใส่ Code ไปแบบนี้

เมื่อใส่ Routing ในบรรทัดที่ 5–7 แล้ว ทดลองเข้า http://localhost:4200/chart ควรจะได้หน้าจอดังภาพนี้

เมื่อใส่ routing ถูกต้องจะได้หน้าจอดังภาพ

ถัดมาเราจะมาสร้างสถานีรับข้อมูลที่ส่งมาจาก Server กัน โดยใน Angular เวลาเราจะสร้าง Service หรือ Get ข้อมูลอะไรซักอย่างผ่าน Http เราจะใช้คำสั่งนี้ในการสร้างที่เก็บ Service เหล่านั้นก่อน

ng generate service services/signal-r

อธิบายคำสั่งนี้คือ เราจะสร้าง Service ใน Angular ชื่อ signal-r Service เพื่อรวมคำสั่งเกี่ยวกับการ สร้างสถานี เปิดปิดท่อ หรือ Call API ไปหาตัว NetCore Server ของเรา

เมื่อใช้คำสั่งนี้แล้วจะได้ไฟล์กลับมา 2 ไฟล์ดังภาพ

เมื่อสร้างเสร็จสมบูรณ์จะได้ไฟล์กลับมา 2 ไฟล์ดังภาพ

ถัดมา ติดตั้ง Package SignalR สำหรับ Javascript โดยใช้คำสั่ง

npm install @aspnet/signalr

เมื่อติดตั้งเสร็จแล้วให้ Import มาใช้งานใน signal-r.service.ts ตาม Code ด้านล่าง

Code ตัวอย่างในการ Import SignalR package มาใช้งานใน Angular Service

บรรทัดที่ 2) คือการ Import Package ที่เราเพึ่ง Install มาเมื่อกี้

บรรทัดที่ 9) ประกาศตัวแปร Instance Connection เอาไว้สร้างสถานีรับจาก Server

บรรทัดที่ 14–22 ) สร้าง Function StartConnection สำหรับนำ Client ไปเชื่อมต่อท่อ DataHub ที่เราสร้างรอไว้ที่ Server แล้ว

ถัดมาเปิดไฟล์ชื่อ chart.component.ts และใส่ Code ตามภาพ

บรรทัดที่ 12) Inject SignalRService จากที่เราสร้างเมื่อกี้มาใช้งาน

บรรทัดที่ 16) เชื่อมท่อระหว่าง Client => DataHub => Server เข้าด้วยกัน

บรรทัดที่ 18–20) สร้างสถานีรับข้อมูลที่ 1 ชื่อ chartStation1 และชื่อต้องตรงกับไฟล์ ChartController.cs บรรทัดที่ 21

บรรทัดที่ 22–24) สร้างสถานีรับข้อมูลที่ 2 ชื่อ chartStation2 และชื่อต้องตรงกับไฟล์ ChartController.cs บรรทัดที่ 28

เพื่อทดสอบว่าเราเชื่อมต่อท่อได้สำเร็จและสามารถทำ RealTime ได้แล้ว ให้เปิด Tab แรกด้วย Link => http://localhost:4200/chart และเปิด Developer Console ไว้

และเปิด Tab ที่ 2 ด้วย https://localhost:5001/swagger และทดลองส่งข้อมูลผ่านท่อด้วย Swagger ไปยัง Angular

จากภาพจะเห็นว่าเราสามารถเชื่อมต่อท่อกับ Server ได้สำเร็จพร้อมส่ง Data แบบ Realtime แล้ว

จากภาพจะเห็นว่าเราสามารถส่งข้อมูลผ่าน Server NetCore ด้วย Swagger ในรูปแบบ RealTime ไปให้ Angular หรือ Client รับข้อมูลได้แล้ว

ถัดมาจะเป็นการติดตั้ง Graph เพื่อให้เห็นภาพมากขึ้นเวลา เราส่ง Data ผ่าน Server แบบ RealTime มากราฟก็จะขยับแบบทันที ทันใด

[กลับมาตั้งหลักภายใต้ Folder client] และติดตั้ง ng2-charts
npm install ng2-charts
[เมื่อติดตั้งเสร็จแล้วให้ติดตั้ง chart.js ต่อ]
npm install chart.js

หลังจากติดตั้ง 2 คำสั่งเสร็จแล้ว ให้เปิดไฟล์ angular.json แล้ว search หาคำว่า “scripts” และเติม path นี้ลงไป

"./node_modules/chart.js/dist/Chart.js"

เมื่อเติมเสร็จแล้วจะได้ดังภาพแบบนี้

ถัดมาให้เปิดไฟล์ app.module.ts ของ angular และ import ChartsModule มาใช้งานตามภาพแบบนี้

เมื่อใส่เสร็จสมบูรณ์แล้วก็จะได้ดังภาพแบบนี้

ถัดมาเปิดไฟล์ chart.component.html และใส่ Code ด้านล่าง เพื่อวาดกราฟด้วย HTML

ถัดมาเปิดไฟล์ chart.component.ts และใส่ Code ด้านล่าง เพื่อ Set Up ค่าเริ่มต้นของกราฟและ Import Package ngChart2 มาใช้งาน

เมื่อทำตาม Code ดังกล่าวแล้วจะสามารถทำ Graph Realtime เบื้องต้นได้อย่างเสร็จสมบูรณ์สวยงามครับ ตามภาพด้านล่าง

เมื่อเติม Code เสร็จสมบูรณ์ก็จะได้กราฟ Realtime อย่างสวยงามครับ

ยังไงไม่เข้าใจตรงไหนส่ง Email มาถามหรือพิมพ์ Comment มาถามได้ทุกเมื่อเลยนะครับ ขอให้สนุกกับการเขียน Code ครับผม

Source Code ทั้งหมดสามารถ Clone หรือ Download มาลองเล่นได้จาก Link ด้านล่างครับผม

chaiyarin/signal-r-realtime-graph