HTML 테이블의 차이 AJAX 업데이트?

StackOverflow https://stackoverflow.com/questions/602322

  •  03-07-2019
  •  | 
  •  

문제

25x20 HTML 테이블 (게임 보드)을 기반으로 한 게임이 있습니다. 3 초마다 사용자가 "이동"할 수 있으며, 이는 서버에 AJAX 요청을 보내는 경우 서버가 전체 HTML 테이블을 다시 렌더링하고 사용자에게 보냅니다.

이것은 글을 쓰기 쉬웠지만 많은 대역폭을 낭비합니다. 큰 테이블에 대한 전체 업데이트 대신 차이를 보내는 데 도움이되는 라이브러리, 클라이언트 (바람직하게는 jQuery) 또는 서버 측이 있습니까? 주어진 재 장전에서는 일반적으로 5-10 개의 타일 만 변경되므로 3 초마다 500 대신 타일 만 보내면 대역폭 사용을 크기로 줄일 수 있다고 생각합니다.

또한 더 나은 대안을 제안 할 수 있다면 "You Idiot, 왜 HTML 테이블을 사용하고 있습니까?"-유형의 의견에 열려 있습니다. 예를 들어 HTML 테이블을 사용하는 대신 고려해야 할 CSS/DOM 조작 기술이 있습니까? 테이블을 사용해야하지만 각 TD 좌표 ( "12x08")에 대한 각 TD 좌표를 제공 한 다음 jQuery를 사용하여 셀을 ID로 바꾸십시오.

설명 : 타일은 이미지가 아닌 텍스트입니다.

도움이 되었습니까?

해결책

게임 보드를 다차원 JavaScript 배열로 모델링 할 수 있습니다.

[[x0, x1, x2, x3 ... xn],
.....
.....]

각 항목은 행을 나타내는 배열입니다. 각 셀은 게임 조각/정사각형의 수치 값을 유지합니다.

이 모델은 AJAX를 통해 JSON을 통해 서버로 보내는 "계약"일 수 있습니다. 서버는 동일한 배열을 계산하고 다시 UI로 보냅니다. 해당 배열을 테이블, div 또는 원하는대로 렌더링 할 수 있습니다. 프로토 타입 .js와 jQuery는 DHTML을 쉽게 만들 수 있습니다.

이 배열 형식은 마크 업이있는 전체 HTML 응답보다 훨씬 작습니다. 또한 원하는 방식으로 보드를 자유롭게 렌더링 할 수 있습니다.

이 형식을 더 압축하고 델타를 보낼 수 있습니다. 예를 들어 : 사용자가 변경된 타일의 좌표를 저장하고이를 서버로 보냅니다.

[(x1, y2),.....(xn, yn)]

또는 다른 방법으로 수행 할 수 있습니다. 전체 모델 배열을 서버로 보내고 서버가 델타를 계산하도록합니다.

Sponty를 확인하고 몇 분 정도마다 Ajax 트래픽을 시청하면 매우 유사한 일을합니다. http://www.thesponty.com/클라이언트는 전체 모델을 서버로 전송하고 서버는 Diff를 보냅니다.

다른 팁

서버 측의 새로 고침 사이의 상태를 알고 있다면 (질문에 대한 의견 참조) JSON을 사용하여 데이터를 보냅니다 (정확한 구문에 대해서는 확실하지 않음).

[
    { x: 3, y: 5, class: "asdf", content: "1234" },
    { x: 6, y: 5, class: "asdf", content: "8156" },
    { x: 2, y: 2, class: "qwer", content: "1337" }
]

컴팩트 한 (추가 공백 등을 제거하십시오) GZIP를 gzip으로 JavaScript로 보내십시오. 놀랍게도, 이것을 읽는 JavaScript 코드는 그렇게 복잡하지 않습니다 (단순히 DOM 조작).

델타에 대한 생각없이 :

JSON을 매우 쉽게 사용하여 이런 종류의 일을 할 수 있습니다. 자신의 압축 형식도 출시 할 수 있습니다.

GZIP를 사용하여 데이터를 압축하면 많은 도움이 될 것이라고 생각합니다. 오늘날 대부분의 브라우저는이를 지원하며 응답의 크기를 크게 줄입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top