Blazor 그래픽 채팅

Blazor + SignalR + Canvas를 이용해 만든 그래픽채팅입니다.
객체의 상태 관리는 Akka.net 액터모델이 이용되었으며

22년 토이작으로 조금가다듬어 코드도 함께 공유합니다.

작동링크 : BlazorChatApp
전체코드 : GitHub - psmon/BlazorChatAppEcom
서버코드Lib : https://getakka.net/

ActorPlayGround with Blazor : https://code.webnori.com

8 Likes

작동 링크에서 502 가 뜨네요

2 Likes

BlazorServer + BlazorClientAssembly 를 도커에 한방 빌드및 실행구성하다가 잘못되었나봅니다.

다음 내용 참고해 수정되긴했으나~ 어렵네요( 도커 캐싱에 따라 되었다 안되었다 하는듯 )

오류 제보 감사합니다.

링크 : Docker not launching Blazor WebAssembly App .NET 8 as expected - Stack Overflow

1 Like

공유 감사합니다.

2 Likes

작동링크가 연결되어 시도해 봤습니다.

그런데, 캐릭터의 움직임이 뭔가 버퍼를 먹는 것 같습니다.
방향 키를 누른 후 몇 초 동안 안되다가 한번에 우수수 움직이는 경우가 드물지 않게 발생하네요.

괜찮으시다면, 문제점과 해결책을 공유해주시면 감사하겠습니다.

2 Likes

Blazor가 Canvas를 제어하는데 최적화된 녀석은 아니라 닷넷코어 3시절 자바스크립트와 연동되 닷넷코드 버전으로 그리는 blazor 컴포넌트를 사용했는데 닷넷9가 나오는시점까지 한번도 업데이트가 없었네요~ 아직 웹어셈을 극단적으로 이용하는 최적화된 Canvas 툴이 등장하지 않는것 같습니다.

Blazor C# 을 이용해 렌더링 씬을 하나하나 그리는 방법을 채택했으며, 2d게임 렌더링에 전문가는 아니여서 변경된 부분만 다시그리는 방식이 아닌 전체 영역 을 다시 그리기때문에 느린것같으며, 그렇다 해도 렌더링 오브젝트가 많지 않음에도 느리기때문에 js를 c#으로 제어하기위해 발생되는 추가적인 invoke 방식이 게임 fps 렌더링을 처리하기에 고성능이 아닌것같으며, 순수 js를 이용했을때보다 추가적인 오버헤드가 발생하며 이부분은 blazor의 지식을 통한 튜닝요소로 보여집니다.

렌더링 성능 문제를 해결하기위한 간단한 튜닝이 시도 되었으며~ 초당 그리는 fps를 60이하로 고정 조정했으며 웹에서 렌더링이 그래픽카드가 고사양이라고 해도 최적화를 기대할수는 없지만, 다소 부드럽지 않더라도 소스를 다운받아 로컬실행가능하니 30이하로 낮추거나 최적값을 찾으면 될것같습니다.

아래와같이 1회 튜닝이 되었으니 참고하면될듯하며~ 더 좋은 canvas 성능의 렌더링이 필요하면 Blazor보다는 쓸만한 2d canvans game engine js 들이 많이 있으니 이 녀석들을 활용하는것이 추천되며

blazor에서 쓸만하고 닷넷코딩이 가능한 2d canvas 엔진이 출시하기를 기다리고 있는데 잘 등장하지 않네요 fps 설정은 아래코드 참고해 조정하면 될것같습니다.

크리스마스 특집으로 눈내리는 애니도 추가되었으며 개수를 추가하면서 fps튜닝을 해볼수 있을것으로 보여집니다. ( 더 극단적인 성능 튜닝은 그래픽 카드 가속엔진을 활용하는것이 있을것같은데 제 영역밖의 이슈일것같습니다 )

2 Likes

추가로 아케이드케임에 이용되는 방향키를 지속 누른다면 pressed,up 이벤트를 누른시간에 따라 델타 가속값을 활용해 애니메이션을 제어해야 원하시는 자연스러운 캐릭터 이동 애니가 될것같고~

샘플은 키를 계속 눌러 반응하는 이벤트처리 형태가 아니고 키를 한번누르면 서버에 좌표를 전송하고 한칸씩 이동하는기법을 사용했기때문에 ( 체스판처럼 턴제에 이용되는 보드이동형태 ) 방향키를 끊어서 한번씩만 눌러야합니다.

2 Likes

솔직히 말씀드리면, SignalR 이 얼마 만큼의 즉시성을 제공하는 지 테스트를 해봤습니다.

키를 계속 누르기도 했고, 후다닥 여러 번 누르기도 했는데, 버퍼링과 소실이 일어 나곤 합니다.

이러한 현상이 SignalR 때문인지, Canvas 때문인지, 아니면 Akka net 때문인지 궁금해서 글을 올렸습니다.
재밌는 프로젝트라 제가 한번 해보고 싶었지만, 죄송하게도 하는 일이 너무 밀려서, 코드 저자에게 매달린 것이죠. (죄송)

2 Likes

네트워크에선 흔히 발생하는 현상입니다.
게임에선 데드 레커닝 기법으로 해결하고 있지요

2 Likes

저도 관심분야라~ ^^ 덕분에 튜닝을 한번 했습니다.

akka.net 서버관점에서 성능관련은 저도 지속적으로 살펴보고 있어서 부가설명드리면
웹소켓(signalR)이 브라우저를 대응하다보니~ TCP 네이티브로 상호연결된것보다 현저히 성능이 낮을것으로 예상하며

akka.net은 동일플랫폼간에만 작동하는 remote 프로토콜로 단순하게 반응속및
성능만 비교하면 signalR 보다 성능이 월등히 좋을것으로 예상됩니다.

다른분야의 퍼포먼스를 제외하고 Akka.net 의 성능관련 장점만 살펴본다고하면

리모트의 경우 Google.Quic,dot-netty 등 고성능 TCP모듈 선택가능하며
직렬화의 경우도 NewtonSoftJsonSerializer 를 기본사용하지만 이 성능이 마음에 안들었는지
HyperionSerializer 자체개발하고 고성능 직렬기로 교체가능하며 구글프로토콜 버퍼도 지원합니다.

성능에 영향을 미치는 핵심 모듈을 교체할수 있다란 장점이 있으며

akka.net 성능 비교군은 아마 웹소켓보다는 ms도 이 분야에 공식으로 밀고 있는 ms orleans 일것같습니다.