Tutorial: Using Redux and Redux-Saga to handle WebSocket messages.

Mat Sz — Fri, 14 Feb 2020 14:41:46 +0000

Since I've discovered redux-saga I've found that it's perfect for asynchronous actions that affect the global state - and handling WebSocket messages is one of those things. The first time I've used this is in filedrop-web and it's been working well enough to make me consider writing a tutorial for it.

Disclaimer: I will be using TypeSocket, which is a library I've made. It makes certain WebSocket-related tasks easier without being too heavy (no special polyfills for platforms that don't support WS).

You can get TypeSocket from npm:

yarn add typesocket
# or
npm install typesocket

The way my integration works is by creating a new Redux middleware that will contain the WebSocket handling code, will dispatch WebSocket messages and connection state updates and will react to incoming send message actions.

First, I have an ActionType enum, for all the available ActionTypes:

enum ActionType {
    WS_CONNECTED = 'WS_CONNECTED',
    WS_DISCONNECTED = 'WS_DISCONNECTED',
    WS_MESSAGE = 'WS_MESSAGE',
    WS_SEND_MESSAGE = 'WS_SEND_MESSAGE',
};

Then I also define an interface for the message model (TypeSocket will reject all invalid JSON messages by default, but doesn't check if the message matches your type):

export interface MessageModel {
    type: string,
};

This allows me to create an instance of TypeSocket:

import { TypeSocket } from 'typesocket';

const socket = new TypeSocket<MessageModel>(url);

Which is what we'll be using within our middleware. url refers to the WebSocket URL.

Writing a Redux middleware around TypeSocket is really simple, first we create an empty middleware:

import { MiddlewareAPI } from 'redux';
import { TypeSocket } from 'typesocket';

import { ActionType } from './types/ActionType'; // Your enum with action types.
import { MessageModel } from './types/Models';   // Your message model.

export const socketMiddleware = (url: string) => {
    return (store: MiddlewareAPI<any, any>) => {
        // Here we will create a new socket...
        // ...and handle the socket events.

        return (next: (action: any) => void) => (action: any) => {
            // And here we'll handle WS_SEND_MESSAGE.

            return next(action);
        };
    };
};

Now all that's left is adding our TypeSocket construction code into the middleware...

export const socketMiddleware = (url: string) => {
    return (store: MiddlewareAPI<any, any>) => {
        const socket = new TypeSocket<MessageModel>(url);

        // We still need the events here.

        return (next: (action: any) => void) => (action: any) => {
            // And here we'll handle WS_SEND_MESSAGE.

            return next(action);
        };
    };
};

...and adding the event handling and message sending:

export const socketMiddleware = (url: string) => {
    return (store: MiddlewareAPI<any, any>) => {
        const socket = new TypeSocket<MessageModel>(url);

        // We dispatch the actions for further handling here:
        socket.on('connected', () => store.dispatch({ type: ActionType.WS_CONNECTED }));
        socket.on('disconnected', () => store.dispatch({ type: ActionType.WS_DISCONNECTED }));
        socket.on('message', (message) => store.dispatch({ type: ActionType.WS_MESSAGE, value: message }));
        socket.connect();

        return (next: (action: any) => void) => (action: any) => {
            // We're acting on an action with type of WS_SEND_MESSAGE.
            // Don't forget to check if the socket is in readyState == 1.
            // Other readyStates may result in an exception being thrown.
            if (action.type && action.type === ActionType.WS_SEND_MESSAGE && socket.readyState === 1) {
                socket.send(action.value);
            }

            return next(action);
        };
    };
};

Now that this is taken care of, we need to add the middlewarae to our store. Let's first save the middleware in src/socketMiddleware.ts.

Then we can use it like this:

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';

import { socketMiddleware } from './socketMiddleware';
import reducers, { StoreType } from './reducers';
import sagas from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
    reducers,
    applyMiddleware(socketMiddleware('ws://localhost:5000/'), sagaMiddleware),
);

sagaMiddleware.run(sagas, store.dispatch);

I'm assuming that there are reducers available from ./reducers and sagas (for Redux Saga) in ./sagas.

Now, let's start using Redux Saga to handle our messages. This is pretty simple and comes down to utilizing Redux-Saga's takeEvery:

function* message(action: ActionModel) {
    const msg: MessageModel = action.value as MessageModel;

    // Now we can act on incoming messages
    switch (msg.type) {
        case MessageType.WELCOME:
            yield put({ type: ActionType.WELCOME, value: 'Hello world!' });
            break;
    }
}

export default function* root(dispatch: (action: any) => void) {
    yield takeEvery(ActionType.WS_MESSAGE, message);
}

Sending messages with our setup is also that easy, you will just have to dispatch the message like so:

dispatch({ type: Action.WS_SEND_MESSAGE, value: message });

I prefer using this method over using any other Redux WebSocket libraries because of the flexibility I get when it comes to handling actions inside of the middleware, there's a lot of things you can customize. TypeSocket can be replaced for a pure WebSocket as well, if necessary.

User-friendly peer to peer file sharing as a simple web app - drop.lol

Mat Sz — Thu, 16 Jan 2020 16:31:24 +0000

I'm happy to launch this free file sharing tool: https://drop.lol

It's fully open source, licensed under BSD.

https://github.com/mat-sz/filedrop-web and https://github.com/mat-sz/filedrop-ws

My motivation

I've created this because I was getting annoyed by having to log in to my e-mail account on computers I don't own just to download some attachments - I use a password manager and it gets really tiring (having to manually type a long password). I also didn't like the idea of having to upload files to third party services that could store them.

To resolve these issues I've created my own service that allows for easy WebRTC-based file transfers. In some cases the traffic may be relayed through my TURN server but WebRTC provides end-to-end encryption, so no contents can be seen.

How does it work?

A WebSocket server is used to allow for WebRTC connections being created and to handle some transfer metadata to protect the user's privacy - no WebRTC peer connections are created until both parties agree to a file transfer.

The client side of the app uses React, TypeScript, Redux and Redux-Saga. For the backend I've used node.js and ws (no TypeScript there).

DEV Community: Mat Sz

Tutorial: Using Redux and Redux-Saga to handle WebSocket messages.

User-friendly peer to peer file sharing as a simple web app - drop.lol

My motivation

How does it work?