Как обновить параметр модели и просмотреть его сразу? - PullRequest
Новая
       2

Как обновить параметр модели и просмотреть его сразу?

0 голосов
/ 25 марта 2019

Я работаю с Visual Studio и создал веб-приложение с методом MVC.

В представлении, которое я назвал «игрой», я создал холст в Javascript, который содержит квадратный элемент.Я могу переместить его в разные места.Я хочу знать, что это местоположение в каждый момент (так же, как просматривать координаты моей мыши), но в другом виде, который я назвал «Детали».

Есть ли лучший способ, чем POSTing, это местоположение в каждом движениик квадратной модели, а затем устанавливая функцию Interval в представлении «Подробности», которая делает GET каждые 10 миллисекунд?

Это вроде работает, но это очень медленно и на самом деле не представляет детали реального временимой квадратный элемент

1 Ответ

0 голосов
/ 25 марта 2019

Вы можете использовать ASP.NET SignalR для обновления координат формы в режиме реального времени и без спам-сервера с запросами POST и GET. Вот хороший образец для перемещения фигуры с помощью SignalR. 

namespace MoveShapeDemo
{
    public class MoveShapeHub : Hub
    {
        public void UpdateModel(ShapeModel clientModel)
        {
            clientModel.LastUpdatedBy = Context.ConnectionId;
            // Update the shape model within our broadcaster
            Clients.AllExcept(clientModel.LastUpdatedBy).updateShape(clientModel);
        }
    }
    public class ShapeModel
    {
        // We declare Left and Top as lowercase with 
        // JsonProperty to sync the client and server models
        [JsonProperty("left")]
        public double Left { get; set; }
        [JsonProperty("top")]
        public double Top { get; set; }
        // We don't want the client to get the "LastUpdatedBy" property
        [JsonIgnore]
        public string LastUpdatedBy { get; set; }
    }
}

На стороне клиента: 

<!DOCTYPE html>
<html>
<head>
<title>SignalR MoveShape Demo</title>
<style>
    #shape {
        width: 100px;
        height: 100px;
        background-color: #FF0000;
    }
</style>
</head>
<body>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.js"></script>
<script src="/signalr/hubs"></script>
<script>
    $(function () {
        var moveShapeHub = $.connection.moveShapeHub,
            $shape = $("#shape"),
            // Send a maximum of 10 messages per second 
            // (mouse movements trigger a lot of messages)
            messageFrequency = 10, 
            // Determine how often to send messages in
            // time to abide by the messageFrequency
            updateRate = 1000 / messageFrequency, 
            shapeModel = {
                left: 0,
                top: 0
            },
            moved = false;
        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();
                    moved = true;
                }
            });
            // Start the client side server update interval
            setInterval(updateServerModel, updateRate);
        });
        function updateServerModel() {
            // Only update server if we have a new movement
            if (moved) {
                moveShapeHub.server.updateModel(shapeModel);
                moved = false;
            }
        }
    });
</script>

<div id="shape" />
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...