Learn programming in Myanmar
Simple chat application with Spring WebSocket and Angular 10 Part (1)
What I’ll do
ကျွန်တော်တို့ အင်မတန်ရိုးရှင်းတဲ့ chat application လေးတစ်ခုကို Spring Framework 4.0 မှာပါလာတဲ့ websocket နဲ့ Angular တို့ကိုအသုံးပြုပြီး ရေးကြည့်ကြပါမယ်။ ဒီ Article မှာတော့ Spring Boot project လေးတစ်ခုကို ဘယ်လိုရေးရမလဲဆိုတာ ပြောပြထားပါတယ်။
What I use
- JDK 11
- Spring Boot 2.3.3
- IntelliJ IDEA
Initializing spring boot project
ကျွန်တော်တို့ spring boot project တစ်ခုကို စပြီး ဆောက်ရပါမယ်။ ပထမဉီးဆုံး spring initializr(https://start.spring.io/) ကိုသွားပြီးတော့ dependency အနေနဲ့ WebSocket ကိုရွေးပေးပါ။ ပြီးရင်တော့ အဲ့ project ကို Generate ဆိုတာကို နှိပ်ပြီး ကိုယ့် စက်ထဲကို download လုပ်ပါမယ်။
ပြီးရင်တော့ ကိုယ်နှစ်သက်ရာ IDE တစ်ခုခုနဲ့ download လုပ်ထားတဲ့ project ကိုဖွင့်ပါမယ်။
ကျွန်တော်တို့ websocket ကိုသုံးဖို့အတွက် အနည်းဆုံး file သုံးခု ရေးပေးရပါမယ်။ ပထမဆုံး websocket အတွက် configuration file တစ်ခုရေးပေးရပါမယ်။ ဒုတိယတစ်ခုကတော့ chat လုပ်မယ့် message model တစ်ခုရေးပါမယ်။ နောက်ဆုံးတစ်ခုကတော့ client ဘက်ကနေ request လာရင်လက်ခံဖို့ controller တစ်ခုရေးပေးရပါမယ်။
အခုဆိုရင် ကျွန်တော်တို့ရဲ့ project structure ကဒီလို ဖြစ်လာပါပြီ။
WebSocketConfig
ပထမဉီးဆုံး spring ရဲ့ configuration file မှန်းသိအောင် @Configuration ဆိုတဲ့ annotation တပ်ပေးရပါမယ်။ ပြီးရင်တော့ @EnableWebSocketMessageBroker ဆိုပြီး message broker ကနေ ရောက်လာမယ့် message တွေကို configure လုပ်မယ့် class ဖြစ်ကြောင်း spring framework ကိုပြောပေးရပါမယ်။ Message broker ဆိုတာ application တွေ system တွေ service တွေ တစ်ခုနဲ့တစ်ခုကို messaging protocol တွေကတစ်ဆင့် ဆက်သွယ်ပြီး သတင်းအချက်အလက်တွေ ပေးပို့နိုင်တဲ့ အရာတစ်ခုဖြစ်ပါတယ်။
ကျွန်တော်တို့ တစ်ကယ် message တွေကို configure လုပ်နိုင်ဖို့အတွက် spring framework ရဲ့ WebSocketMessageBrokerConfigurer ဆိုတဲ့ interface ကို implements လုပ်ပေးရပါမယ်။ ပြီးရင်တော့ registerStompEndpoints ဆိုတဲ့ method နဲ့ configureMessageBroker ဆိုတဲ့ method တွေကို override လုပ်ပေးရပါမယ်။
registerStompEndpoints ဆိုတဲ့ method မှာတော့ client ဘက်က လာမယ့် request တွေအတွက် configuration ကို ရေးထားရပါမယ်။ addEndpoint(“/chatty”) က client app ဘက်ကနေ လှမ်း connect လုပ်နိုင်ဖို့အတွက် endpoint ကိုသတ်မှတ်ပေးပါတယ်။ ပြီးရင်တော့ setAllowedOrigins(“http://localhost:4200”) ဆိုပြီး server က connect လုပ်ခွင့်ပေးမယ့် client ရဲ့ cors ကိုသတ်မှတ်ပေးရပါမယ်။ အချို့ browser တွေမှာ websocket ကို support မပေးဘူးဆိုတာမျိုးတွေ ရှိနိုင်လို့ withSockJS() ဆိုပြီး fallback option အဖြစ် SockJS ကိုသုံးထားပါမယ်။
configureMessageBroker ဆိုတဲ့ method မှာတော့ message broker ကို configure လုပ်ပါမယ်။ setApplicationDestinationPrefix(“/app”) ဆိုတဲ့ method က message broker controller method တွေရဲ့ destination prefix ကို သတ်မှတ်ပေးပါတယ်။ ဒီအကြောင်းကို controller အပိုင်းမှာ ဆက်လက်ပြောပြပါမယ်။ enableSimpleBroker(“/topic”) ဆိုတဲ့ method ကတော့ memory-based message broker တစ်ခုကိုသတ်မှတ်ပြီးတော့ client-side ကို သတ်မှတ်ထားတဲ့ destination တွေကနေတစ်ဆင့် message ပြန်ပို့ပေးမှာဖြစ်ပါတယ်။
ChatMessage
ChatMessage ကတော့ POJO class တစ်ခုဖြစ်ပြီးတော့ controller ကနေ data အသွားအပြန်လုပ်မယ့် model တစ်ခုဖြစ်ပါတယ်။
ChatController
Spring မှာ STOMP message တွေက @Controller annotation တပ်ထားတဲ့ class တွေဆီကို ညွှန်းပေးပါတယ်။ Controller class တွေထဲက @MessageMapping annotation တပ်ထားတဲ့ method တွေဟာ url mapping လုပ်ပြီး url တူတဲ့ method ကထအလုပ်လုပ်ပါတယ်။ ဉပမာ @MessageMapping(“/comment”) တပ်ထားတဲ့ method ဟာ client ဘက်ကနေ “/app/comment” ဆိုတဲ့ url နဲ့လာခဲ့ရင် ထအလုပ်လုပ်ပါမယ်။ “/app” ဆိုတာက ကျွန်တော်တို့ config မှာသတ်မှတ်ပေးခဲ့တဲ့ application destination prefix ဖြစ်ပါတယ်။
အဲ့ method က stomp client ကနေလာတဲ့ ChatMessage object တစ်ခုကို parameter အနေနဲ့လက်ခံပါတယ်။ Method အတွင်းမှာ လုပ်စရာရှိတာလုပ်ပြီးရင် object တစ်ခုကို return ပြန်ပေးပါတယ်။ ကျွန်တော်တို့ရဲ့ method ထိပ်မှာ @SendTo annotaion ကိုတပ်ထားခြင်းဖြင့် ဒီ method ကနေပေးလိုက်တဲ့ value ဟာ Message ဆိုတဲ့ spring framework ရဲ့ interface အဖြစ်ကိုပြောင်းသွားပြီး @SendTo ထဲမှာသတ်မှတ်ထားတဲ့ destination ကိုပို့ပါတယ်။ တစ်ဖန် destination ကို subscribe လုပ်နေတဲ့ client app တွေဆီကို message ကိုပြန်ပြီး broadcast လုပ်ပါတယ်။ ဉပမာ ကျွန်တော်တို့ရဲ့ method မှာ @SendTo(“/topic/comment”) တပ်ထားတယ်ဆိုရင် client app A က ပို့လိုက်တဲ့ message က “/topic/comment” ကို subscribe လုပ်ထားတဲ့ တစ်ခြား client app B, C တွေဆီကိုပါ broadcast လုပ်မှာဖြစ်ပါတယ်။ @SendTo annotation အစား SimpleMessagingTemplate ကို autowired လုပ်ပြီးတော့လည်း သုံးလို့ရပါတယ်။ “/topic” ဆိုတာက ကျွန်တော်တို့ config မှာ သတ်မှတ်ပေးခဲ့တဲ့ memory-based message broker ရဲ့ prefix ဖြစ်ပါတယ်။
ကျွန်တော် ဒီ article မှာ memory-based message broker ကိုအသုံးပြုထားပြီးတော့ real world app တွေမှာတော့ RabbitMQ, HornetQ, ActiveMQ စတဲ့ third party message broker တွေကို အသုံးပြုနိုင်ပါတယ်။ STOMP ဆိုတာကတော့ simple text-oriented messaging protocol ဖြစ်ပါတယ်။ STOMP အကြောင်း အသေးစိတ်ကို http://jmesnil.net/stomp-websocket/doc/ မှာလေ့လာနိုင်ပါတယ်။
ဒီအထိကတော့ ကျွန်တော်တို့ရဲ့ spring boot backend server လေးတစ်ခုရေးလို့ပြီးသွားပြီ။ နောက်လာမယ့် Part 2 မှတော့ Angular ဘက်ကနေ websocket နဲ့ချိတ်ပြီးတော့ client app လေးတစ်ခုရေးကြည့်ကြပါမယ်။
ဒါကျွန်တော့် ပထမဆုံး စရေးတဲ့ article ဖြစ်တာကြောင့် အဆင်မပြေမှုများရှိခဲ့ရင် သည်းခံပေးကြပါခင်ဗျာ။
Source code: https://github.com/kyaw-codes/websocket-full-demo.git
