import openSocket from 'socket.io-client';
var socket = openSocket('http://localhost:8000');

export default socket;

export function socket_init(){
    console.log('connected to socket')
}

Now go to your index.js file in the «src» folder and add the following lines:

import { socket_init } from './socket-api/socket-api';
. . .
socket_init();

And done!! If everything was good you should have a «New connection» message in your terminal where you are running the server.js file and a ‘connected to socket’ message in your browser console.

Now we have to emit/subscribe to events. I want to:

1. Emit events from the client to the server when I CRUD todos.

2. The server fires the request to the DB and, once finished, emit an event to the client with the whole list of todos.

NOTE: We will do some extra DB calls, which probably is not the optimal solution, but anyway… let’s do it.

How to make it work with Redux?

Well, I will define a new action of type NEW_TODOS_DATA. This action subscribes to the newTodosData socket event. Whenever the client listen this event in the socket, it dispatches NEW_TODOS_DATA action with the new data. The reducer for NEW_TODOS_DATA is the only one that sends the new todos to the store, and therefore is the only one that creates a new global state. All the other action creators will only emit events through the socket towards the server. Then the server processes the received event, and once it finishes, it emits the newTodosData web socket event again to the client, and the NEW_TODOS_DATA action starts again.

As I said before, I don’t want to go too deep into the Redux Actions and Reducers, so you can copy the ‘redux’ folder again. This time from this repo.

Read:

1. First, install Axios to do http request easily. Run: npm install –save axios

2. In the socket-api/server.js file, import axios and listen for an event called getTodos. When a client emit that event, make a DB request with axios and emit another event called newTodosData towards the client:

const axios = require('axios');
const DB_HOST = 'http://localhost:3001';
...
// Events
io.on('connection', (client) => {
  client.on('getTodos', () => {
    axios.get(DB_HOST+'/todos')
    .then(response => {
      client.emit('newTodosData', response.data);
    })
    .catch(error => {
      console.log(error);
    });
  });
});

3. If you copy the files from my ‘redux’ folder from the repo I just mentioned, you can see that the main changes are in the action creators (take a look at the code comments):

/**
 * Subscribes to newTodosData socket event.
 * On every occurrence, dispatches the new data to the corresponding reducer 
 */
export function subscribeNewTodos(){
    return function(dispatch){
        socket.on('newTodosData', newTodos => {
            dispatch({
                type: NEW_TODOS_DATA,
                payload: newTodos
            });
        })
    }
}

/**
 * Emits a getTodos socket event
 */
export function fetchTodos(){
    socket.emit('getTodos');
    return function(dispatch){
        dispatch({
            type: FETCH_TODOS
        });
    }
}

And the reducers (as you can see only the NEW_TODOS_DATA reducer creates a different state):

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_TODOS:
            return {
                ...state
            };

        ...

        case NEW_TODOS_DATA:
            return {
                ...state,
                items: action.payload
            };

        ...

    }
}

4. Last but not least in the App.js file, we have to import the new subscribeNewTodos action, connect it and call it:

import { fetchTodos, deleteTodo, createTodo, editTodo, subscribeNewTodos } from './redux/actions/todoActions'
...
export default connect(mapStateToProps, { fetchTodos, deleteTodo, createTodo, editTodo, subscribeNewTodos })(App)

And in the componentDidMount() function add:

this.props.subscribeNewTodos();

Before:

this.props.fetchTodos();

Create, Update, Delete:

Ok there aren’t many new fancy things now. All we have to do is change our Redux action creators to emit the create/update/delete socket event towards the server and define the event handlers in the server side to send the request to the DB. Afterwards, emit the newTodosData with the new data towards the client.

1. Define these new event listeners in the server.js file:

...

// Events
io.on('connection', (client) => {

    ...

    //Delete one Todo
    client.on('deleteTodo', (data) => {
        axios.delete(DB_HOST+'/todos/'+data.id)
        .then(response => {
            //Get all todos again
            axios.get(DB_HOST+'/todos')
            .then(response => {
                client.emit('newTodosData', response.data);
            })
            .catch(error => {
                console.log(error);
            });
        })
        .catch(error => {
            console.log(error);
        });
    });
    //Create one Todo
    client.on('createTodo', (data) => {
        axios.post(DB_HOST+'/todos/', data.todo)
        .then(response => {
            //Get all todos again
            axios.get(DB_HOST+'/todos')
            .then(response => {
                client.emit('newTodosData', response.data);
            })
            .catch(error => {
                console.log(error);
            });
        })
        .catch(error => {
            console.log(error);
        });
    });
    //Create one Todo
    client.on('editTodo', (data) => {
        axios.patch(DB_HOST+'/todos/'+data.id, data.newData)
        .then(response => {
            //Get all todos again
            axios.get(DB_HOST+'/todos')
            .then(response => {
                client.emit('newTodosData', response.data);
            })
            .catch(error => {
                console.log(error);
            });
        })
        .catch(error => {
            console.log(error);
        });
    });
});

2. Now that the server listens to us, let’s set the event emitters. In the redux/action/todoActions.jsx modify the following action creators

/**
 * Emits a createTodo socket event
 */
export function createTodo(todo){
    socket.emit('createTodo', { todo });
    return function(dispatch){
        dispatch({
            type: NEW_TODO
        });
    }
}

/**
 * Emits a deleteTodo socket event
 */
export function deleteTodo(id){
    socket.emit('deleteTodo', { id });
    return function(dispatch){
        dispatch({
            type: DELETE_TODO
        });
    }
}

/**
 * Emits a editTodo socket event
 */
export function editTodo(id, newData){
    socket.emit('editTodo', { id, newData });
    return function(dispatch){
        dispatch({
            type: EDIT_TODO
        });
    }
}

As you can see the action creators just emit the socket event with the corresponding data, and then dispatch the action with no data.

3. Now adjust the reducers accordingly:

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_TODOS:
            return {
                ...state
            };
        case NEW_TODO:
            return {
                ...state
            };
        case DELETE_TODO:
            return {
                ...state
            };
        case EDIT_TODO:
            return {
                ...state
            }
        case NEW_TODOS_DATA:
            return {
                ...state,
                items: action.payload
            };
        default:
            return state;
    }
}

And that’s it!! Our UI5 app is running with React+Redux and talking to a server via WebSockets.