WebPack + ReactJS 프로젝트에서 Socket.io (v1.7.3) 연결을 전역으로 설정하는 방법은 무엇입니까?

Question

나는 나의 반작용-구성 요소에 소품으로 소켓을 통과해야 : 다른 구성 요소의 서버에서 메시지를 구독 할 따라서

<Component1 socket={this.state.socket}/> 

, 또는 하위 구성 요소에, 나는에 다시 전송해야 자신의 속성. 끔찍합니다. 그래서 ... WebPack + ReactJS 프로젝트에서 Socket.io (v1.7.3) 연결을 전역으로 설정하는 방법은 무엇입니까? 각 구성 요소에 선언없이 socket.on() 및 socket.emit()을 사용합니다.

Answer 1

언급하지 않으 셨으므로 Flux을 사용하고 있지 않습니까? 해당 홈페이지에서 :

Flux는 Facebook이 클라이언트 측 웹 응용 프로그램을 작성하는 데 사용하는 응용 프로그램 아키텍처입니다. 단방향 데이터 흐름을 활용하여 React의 구성 가능한보기 구성 요소를 보완합니다. 공식적인 프레임 워크가 아닌 패턴이 더 많으므로 많은 새로운 코드없이 Flux를 즉시 사용할 수 있습니다.

Flux를 사용하는 경우 소켓 객체를 전달하지 않아도 소켓 객체를 전달할 수 있지만 React 구성 요소와 통신 할 수는 있습니다. 다음 형식의 예를 들어 은 : 직접 자신 플럭스 상점을 통해 또는 반작용 구성 요소 중 하나,

const Dispatcher = require('./Dispatcher)'; 
const socket = require('socket.io-client')(); 

// Listen to events from server -> Emit them to listeners in the client app 
socket.on('EVENT_A', data => { 
    data.type = 'EVENT_A'; 
    Dispatcher.dispatch(data); 
}); 

// Listen to events from the client app -> Emit them to server 
Dispatcher.register(payload => { 
    switch(payload.type) { 
    case 'EVENT_B': 
     socket.emit('EVENT_B', payload.data); 
     break; 
    case 'EVENT_QUIT': 
     socket.disconnet(); 
     location.assign('/exit'); 
     break; 
    default: break; 
    } 
}); 

당신은 하나의 파일 안에 소켓 관련 코드를 삽입 할 수 있으며, 플럭스의 디스패처는 모든 통신 일을 할 것입니다.