socket 기반.iohybrid 디버그 페이지 만들기

전언
참고한 못 디버깅 페이지 실현, 학습만 제공!
기능은 다음과 같습니다.
PC 단말기 코드 작성, 휴대전화 단말기 실행
해결의 아픔은:
디버그 방지hybrid 응용 프로그램 시 각종 테스트 페이지 중복 쓰기
소스 및 예
원본 코드
https://github.com/dailc/node-server-examples/tree/master/node-socketio-hybriddebug
실행

1.`npm install`

2.`npm run serve`  `node`  

3.     `./test/debugroom.html`  

4.    （            ）

  ，              

주의⚠️,실제 상황은 client 용기에 대한 API를 지원하도록 Hybrid 페이지를 다시 작성하십시오.
예제
의 원리
원리는 사실 매우 간단하다. 바로 HTML5 중의 websocket이고 편의를 위해 성숙한 제3자 라이브러리socket.io를 직접 사용했다.
기본 상호 작용은 다음과 같습니다.

1.     node  （   ），  `express` `socket.io`  `socket`  

2.    PC     ，    ，      （    N   ）

3.PC                    （         `N`    ），          ，    （    `qrcode.js`  ）

4.`Hybrid`      （          ），         ，        ，         

5.PC      ，     ，           ，           ，     `eval`        ，               PC 

주의해야 할 점:

서버는 인용npm의socket.io 패키지

클라이언트는 socket을 인용합니다.io-client 프로젝트에서 발표된 socket.io.js 파일

또한:

백엔드 프로그램은 es6 문법에 근거하여 직접 작성한 다음에 gulp를 바탕으로 dest 파일로 포장하여 실제 실행된 것은 dest의 발표 파일이고 코드 규범은 airbnb

에 가깝다.

앞쪽 페이지는 비교적 자유롭고 스타일은 원래의 스타일을 대량으로 사용했으며 각종 브라우저의 호환도 고려하지 않았다

왜 hybrid 디버그 페이지라고 합니까?디버깅을 위한 핵심 요구 사항hybrid API

단계
편폭 관계로 인해 (필요도 없고) 모든 코드를 한 번 소개하지 않고 몇 가지 중점적인 절차만 소개할 뿐 원본을 직접 읽을 수 있다(원본에서 충분히 명확하다)
설계DebugRoom(PC) 및 DebugClienthybrid단)
상호작용에 따라 PC단과hybrid단 모두 백엔드와 연결해야 하기 때문에 여기는 두 종류를 직접 봉인했다
DebuRoom 클래스
공간의 정의는 다음과 같습니다.

인용 하나socket

방이 하나 있다id 표지

객실에서 클라이언트를 관리할 수 있음

class DebugRoom {
    //       
    this._roomId
    //     socket  
    this._socket
    //              ，key clientid，value client
    this._clients
    
    id()
    clients()
    socket()
    getClientsCount()
    removeClient(client)
    addClient(client)
    clearClients()
}

DebugClient 클래스
클라이언트의 정의는 다음과 같습니다.

인용 하나socket

클라이언트 id ID 1개

한 방id의 인용이 있는데 맞은 방 번호를 가리킨다(물론 인용DebugRoom 대상일 수도 있다)

class DebugClient {
    //       
    this._roomId
    //    id
    this._clientId
    //     socket  
    this._socket
    
    id()
    roomId()
    socket()
}

인터랙티브 인터페이스를 설계하다
전후단 상호작용socket.io에서 정의한 이벤트를 통해 다음과 같은 방과 클라이언트와 백엔드의 상호작용 이벤트 인터페이스가 있다.
공통 상호 작용 이벤트
백그라운드:

//       ，       （    `io.connect`），        'open'  
io.on('connection', ...)

//         ，       （         `socket.disconnect`），           ，         ，        ，            ，       ，              
io.on('disconnect', ...)

공간 및 클라이언트:

//         ，  ，     ，        'create room'，        'create client'
socket.on('open', ...)

//           
socket.on('disconnect', ...)

공간과 백그라운드 상호 작용 이벤트
백그라운드:

//       ，    ID  ，          （new DebugRoom）
io.on('create room', ...)
//         ，                 ，       'receive dispatch data'  
io.on('dispatch data', ...)

방:

//        ，                     
socket.on('client created', ...)
//        ，                 
socket.on('client destroy', ...)
//        ，             ，            
socket.on('client excuted', ...)

클라이언트와 백그라운드 상호작용 이벤트
백그라운드:

//        ，       ，     id  ，      ，           'client created'  
io.on('create client', ...)
//          ，            ，     ，          ，      'client excuted'  
io.on('client excute notify', ...)

클라이언트:

//         ，             ，            ，     'client excute notify'  
socket.on('receive dispatch data', ...)

일부 논리적인 세부 사항
이상의 절차는 전체 프로그램의 기본적인 사고방식과 상호작용이다. 여기에 상호작용 세부 사항을 보충한다.

전역roomsHash 및 clientsHash로 모든 방과 클라이언트를 캐시하여 직접 조회하기 편리함

매번 창설할 때마다id는 맞은 socket에 직접 귀속할 수 있어 더욱 편리하다

방과 클라이언트id는 직접 사용하지 않는 것이 좋다. 인코딩을 한 번 들어갈 수 있다

클라이언트의 연결이 끊겼을 때 반드시 방의 취소 여부와 폐기 여부를 판단하고 중복 조작하지 마세요

연결이 끊어진 후 캐시에 있는 인용을 제때에 제거해야 합니다

추가 소스 참조https://github.com/dailc/node-server-examples/tree/master/node-socketio-hybriddebug
부록.
블로거
개인 블로그에 처음 게시2017.11.28http://www.dailichun.com/2017/11/28/socket_hybriddebug.html
참고 자료

socket.io/docs

스파이크 JSAPI 콘솔