Sử dụng socket.io với redux

Question

Đây là lần đầu tiên tôi sử dụng socket.io trong quá trình sản xuất. Tôi đang sử dụng React + Redux. Gần đây tôi đã tích hợp socket.io với redux và hoạt động tốt nhưng tôi không chắc liệu đó có phải là cách tốt nhất để làm như thế nào tôi đã làm hay không. Bởi vì tôi đã không tìm thấy bất kỳ loại thực hiện thích hợp của socket.io với redux, tôi cần một số trợ giúp/đề xuất về cách nếu tôi có thể cải thiện nó.

Vì vậy, đối với người mới bắt đầu tôi đã thiết lập một dịch vụ để quản lý ổ cắm trên tất cả các ứng dụng:

Socket.js

import isEmpty from 'lodash/isEmpty'; 
import io from 'socket.io-client'; 
import storage from '../storage'; 

/* eslint-disable no-use-before-define */ 

const Socket = { 
    connect, 
    emit, 
    on, 
    removeListener, 
    socket: null 
}; 

/* eslint-enable no-use-before-define */ 

function connect() { 
    const hasAuthenticated = !isEmpty(storage.get('user')); 
    if (hasAuthenticated) { 
    // Setup a server for testing. 
    Socket.socket = io.connect('http://localhost:3000', { reconnect: true }); 
    } 
} 

connect(); 

function on(eventName, callback) { 
    if (Socket.socket) { 
    Socket.socket.on(eventName, data => { 
     callback(data); 
    }); 
    } 
} 

function emit(eventName, data) { 
    if (Socket.socket) { 
    Socket.socket.emit(eventName, data); 
    } 
} 

function removeListener(eventName) { 
    if (Socket.socket) { 
    Socket.socket.removeListener(eventName); 
    } 
} 

export default Socket; 

tôi đã chỉ được sử dụng nó với một trang duy nhất, nhưng ofcourse có sẽ có nhiều trang hơn. Redux compositon của tôi cho trang đó là:

Dashboard.jsx

componentWillMount() { 
    this.props.alertViolations(); // Action 
    } 

    componentWillUnmount() { 
    this.props.unsubscribeViolations(); // Action 
    } 

Actions.js

export function alertViolations() { 
    return dispatch => { 
    Socket.on('violations', violation => { 
     dispatch(actions.updateViolations(violation)); 
    }); 
    }; 
} 

export function unsubscribeViolations() { 
    Socket.removeListener('violations'); 
    return dispatch => { 
    dispatch(actions.removeViolationsListener()); 
    }; 
} 

của nó làm việc tốt. Khi ngắt kết nối, nó sẽ ngừng nghe chức năng phát ra mà tôi có trên máy chủ. Tôi thực sự đánh giá cao nếu tôi có thể nhận được một số đề xuất về:

• Tôi có cần thiết lập phần mềm trung gian để quản lý ổ cắm tốt hơn và cách trừu tượng không?
• Có cách nào tốt hơn để quản lý ổ cắm bằng redux không?
• Làm cách nào để sử dụng chức năng tích hợp sẵn trong các chức năng connect và disconnect?
• Cách tôi đã xử lý để chỉ tạo kết nối nếu người dùng có xác thực, điều đó có ổn không? Hoặc có thể có một cách tốt hơn để xử lý này là tốt?
• Ồ cũng vậy, nếu tôi muốn xóa kết nối khi đăng xuất? Tôi chỉ cần phải removeListeners từ tất cả các phương pháp hoặc tôi có thể sử dụng chức năng ngắt kết nối trên các hành động đăng xuất?

Cảm ơn rất nhiều. Xin vui lòng cho tôi biết nếu tôi đã bỏ lỡ bất cứ điều gì trong việc giải thích.

Answer 1

Middleware là nơi phổ biến nhất cho kết nối liên tục như websocket trong ứng dụng Redux. Có một số lượng lớn các thư viện tích hợp webuxocket sẵn có của Redux + đã có - xem danh sách của tôi tại https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware.md#sockets-and-adapters. Bạn có thể sử dụng một số trong số đó, hoặc sử dụng chúng làm ví dụ cho việc triển khai của riêng bạn.