MixedCode

전 시간에는 간단한  WebSocket 과 ASP.NET SignalR을 이용해 간단한 웹채팅기능을 구현해보았습니다.

이번시간에는 실시간웹 기술환경을 이용해 웹게임을 구현할수 있는 간단한 모형이동 동기화 샘플을 만들어보도록 하겠습니다.

대략적인 시나리오는 사각형 모양을 특정 사용자가 클릭해 드래그하면  해당 웹페이지에 접속해 있는 모든 사용자의 브라우저에 있는 동일 사각형 모양이 함께 움직이는 예시입니다.
해당 시나리오를 활용 응용하면 캐주얼 웹게임,보드게임,화이트보드, 실시간 모니터링등의 서비스를 직접 개발할수 있습니다.

실제 해당 기능을 이용해 만들어진 슈팅게임을 한번 보고 시작할까요?
http://shootr.signalr.net
WebSocket 과 ASP.NET SignalR을 이용해 만들어진 웹 슈팅게임입니다.

그럼 관련 예시를 만들어 보겠습니다.

1. Nuget Package Console 을 오픈하고  "
Install-Package jQuery.UI.Combined " 코드를 입력후 엔터칩니다.
-Jquery UI 스크립트 라이브러리가 자동 설치추가됩니다.



2. Hubs 폴더에 MoveShapeHub.cs 클래스를 추가합니다.





3. MoveShapeHub 클래스에 다음과 같이 코딩합니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Newtonsoft.Json;

namespace WebChatSolution2017.Hubs
{
    public class MoveShapeHub : Hub
    {
        public void UpdateModel(ShapeModel clientModel)
        {
            clientModel.LastUpdatedBy = Context.ConnectionId;
            Clients.AllExcept(clientModel.LastUpdatedBy).updateShape(clientModel);
        }
    }

    public class ShapeModel
    {
        [JsonProperty("left")]
        public double Left { get; set; }

        [JsonProperty("top")]
        public double Top { get; set; }

        [JsonIgnore]
        public string LastUpdatedBy { get; set; }
    }
}




4. HomeController에 MoveShape 액션메소드를 추가하고 뷰를 추가합니다.



4. MoveShape View 코드를 아래와  같이 구성합니다.


@{
    ViewBag.Title = "MoveShape";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles
{

<style>
    #shape {
        width: 100px;
        height: 100px;
        background-color: #FF0000;
    }
</style>

}

<div id="shape" />

@section scripts
{

<script src="/Scripts/jquery-1.12.4.min.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="/Scripts/jquery.signalR-2.2.1.js"></script>
<script src="/signalr/hubs"></script>

<script>

$(function () {
            var moveShapeHub = $.connection.moveShapeHub,
            $shape = $("#shape"),
            shapeModel = {
                left: 0,
                top: 0
            };
            moveShapeHub.client.updateShape = function (model) {
                shapeModel = model;
                $shape.css({ left: model.left, top: model.top });
            };
            $.connection.hub.start().done(function () {
                $shape.draggable({
                    drag: function () {
                        shapeModel = $shape.offset();
                        moveShapeHub.server.updateModel(shapeModel);
                    }
                });
            });
        });
</script>

}


5. 마스터 화면을 담당하고 있는 Views\_Layout.cshtml  에  RenderSection Style을 추가합니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 내 ASP.NET 응용 프로그램</title>
    @Styles.Render("~/Content/css")

    @RenderSection("styles", required: false)

    @Scripts.Render("~/bundles/modernizr")
</head>


6. 디버깅을 시작해 해당 뷰를 여러 브라우저에서  오픈 후 사각형을 드래그 해보시면 다른 화면에서 동시에 동일하게 움직이는 것을 확인 할수 있습니다.



지금 까지 실시간 웹 통신을 이용한  웹게임의 원리를 구현해 보았구요.
다음 시간은  실시간 대시보드를 구현해 보겠습니다.






Comments

Leave a Reply

*