DEV Community: Joel Raju

Handling multiple click events in React Native

Joel Raju — Sat, 13 Feb 2021 18:45:19 +0000

Originally published on my blog.

Introduction to click events in React Native

React Native provides 3 main primitives to handle click events.

TouchableHighlight
TouchableOpacity
TouchableWithoutFeedback

Using any of these is a pretty standard affair. Just wrap our component that needs to respond to click events.

// imports...

<TouchableHighlight onPress={() => console.log('Clicked')}>
  <Text>Click me</Text>
</TouchableHighlight>

Problem with Touchables

Though they work well for most of the use cases, there are some tricky situations which they cannot handle. Consider the case of handling a single click, double click and a long press event, all on the same element.

PanResponder to the rescue

PanResponder provides a predicatable wrapper to the lower level Gesture Responder System API. It provides much granular control over the touch events and also gives access to useful meta info like touch start position, touch end position, velocity of the gesture etc.

Let's learn how to make a View component respond to touch events using PanResponder.

import { View, PanResponder, Text } from 'react-native';

const MyComponent = () => {
  const responder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponder: () => true,

    onPanResponderStart: (event) => {
      console.log('Touch has started !');
    },

    onPanResponderRelease: (event, gestureState) => {
      console.log('Touch has ended !');
    },

    onPanResponderTerminate: () => {},
  });

  return (
    <View {...responder.panHandlers}>
      <Text>Click Me </Text>
    </View>
  );
};

onStartShouldSetPanResponder should return true to allow the view to become the responder at the start of a touch event.

onMoveShouldSetPanResponder should return true to allow the view to become the responder at the start of a drag event.

onPanResponderStart callback is fired when the PanResponder registers touch events.

onPanResponderRelease callback is fired when the touch has been released.

onPanResponderTerminate callback is fired when the responder has been taken from the View. This can happen when other views makes a call to onPanResponderTerminationRequest or it can be taken by
the OS without asking (happens with control center/ notification center on iOS).

To make the double click work, we need to use a counter and set a maximum time duration between the click so as to treat it as a double click. 400ms of delay between the clicks is a good place to start. We'll use the handleTap to determine the type of click event based on the timer.

const MyComponent = () => {
  const [isTerminated, setTerminated] = useState(false);
  const [touchStartTime, setTouchStartTime] = useState(0);
  const [lastTap, setLastTap] = useState(0);

  const DOUBLE_PRESS_DELAY = 400;

  const handleTap = (event, gestureState) => {
    const timeNow = Date.now();
    if (lastTap && timeNow - lastTap < DOUBLE_PRESS_DELAY) {
      console.log('Handle double press');
    } else {
      setLastTap(timeNow);

      const timeout = setTimeout(() => {
        setLastTap(0);
        console.log('Handle single press');
      }, DOUBLE_PRESS_DELAY);
    }
  };

  const responder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponder: () => true,

    onPanResponderStart: () => {
      const timeout = setTimeout(() => {
        if (!isTerminated) {
          setTouchStartTime(Date.now());
        }
      });
    },

    onPanResponderRelease: (event, gestureState) => {
      handleTap(event, gestureState);
    },

    onPanResponderTerminate: () => {
      setTerminated(true);
    },
  });

  return (
    <View {...responder.panHandlers}>
      <Text>Click Me </Text>
    </View>
  );
};

And now to make the long press work we need another counter with a delay of 700ms. We'll first check if it is a long press before checking it was a single press or a double press. We'll use handlePressOut to determine the type of click and deligate the action for it.

const MyComponent = () => {
  const [isTerminated, setTerminated] = useState(false);
  const [touchStartTime, setTouchStartTime] = useState(0);
  const [lastTap, setLastTap] = useState(0);

  const [longPressTimer, setLongPressTimer] = useState(0);
  const [singlePressTimer, setSinglePressTimer] = useState(0);

  const DOUBLE_PRESS_DELAY = 400;
  const LONG_PRESS_DELAY = 700;

  const cancelLongPressTimer = () => {
    if (longPressTimer) {
      clearTimeout(longPressTimer);
      setLongPressTimer(0);
    }
  };

  const cancelSinglePressTimer = () => {
    if (singlePressTimer) {
      clearTimeout(singlePressTimer);
      setSinglePressTimer(0);
    }
  };

  const handleTap = (event, gestureState) => {
    cancelSinglePressTimer();

    const timeNow = Date.now();
    if (lastTap && timeNow - lastTap < DOUBLE_PRESS_DELAY) {
      console.log('Handle double press');
    } else {
      setLastTap(timeNow);

      const timeout = setTimeout(() => {
        setLastTap(0);
        console.log('Handle single press');
      }, DOUBLE_PRESS_DELAY);

      setSinglePressTimer(timeout);
    }
  };

  const handlePressOut = (event, gestureState) => {
    const elapsedTime = Date.now() - touchStartTime;
    if (elapsedTime > LONG_PRESS_DELAY) {
      console.log('Handle long press');
    } else {
      handleTap(event, gestureState); // handles the single or double click
    }
    setTouchStartTime(0);
  };

  const responder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponder: () => true,

    onPanResponderStart: () => {
      cancelLongPressTimer();

      const timeout = setTimeout(() => {
        if (!isTerminated) {
          setTouchStartTime(Date.now());
        }
      });

      setLongPressTimer(timeout);
    },

    onPanResponderRelease: (event, gestureState) => {
      handlePressOut(event, gestureState);
    },

    onPanResponderTerminate: () => {
      setTerminated(true);
    },
  });

  return (
    <View {...responder.panHandlers}>
      <Text>Click Me </Text>
    </View>
  );
};

Conclusion

I've made react-native-gifted-touch which exactly does this so you can handle multiple clicks on the same element effortlessly. The default time delays in the library can be configured using props to better suit your requirements. Feel free to check it out.

Effective form handling using React Hooks

Joel Raju — Tue, 31 Mar 2020 17:08:00 +0000

Originally published on my blog.

Introduction

There have been interesting (and opposing) ideas of how form state should be handled in React. Some lean towards keeping the form state in a globally (like in Redux, MobX etc;), some prefer keeping it locally, some prefer to render forms with a schema etc.

Some of the popular libraries for form handling in React

Why forms state should be local ?

I could be hitting the hornet's nest with this, but I believe form state should be kept locally in the component and not in the global state container. The primary reason for this argument is because if we reuse the same form component elsewhere in our app, we often want different state for both the forms. Sure, we could create additional pieces state for each instance of the form component, but this defeats the purpose of the global state which is to share same state across different components.

Handling form state locally

Lets start by handling the input state change using Hooks.

// ....

const [firstName, setFirstName] = React.useState('');
const handleFirstNameChange = ({ target: value }) => setFirstName(value);

// ....

<input
  type='text'
  name='firstname'
  value={firstname}
  onChange={handleFirstNameChange}
/>;

// ....

Now lets add validation and error message.

// ....

const [firstName, setFirstName] = React.useState('');
const [firstNameError, setFirstNameError] = React.useState('');

const handleFirstNameChange = ({ target: { value } }) => {
  if (value.match(/^[a-zA-Z]*$/)) {
    firstNameError('');
  } else {
    firstNameError('Field firstname is not valid !');
  }
  setFirstName(value);
};

// ....

<input
  type='text'
  name='firstname'
  value={firstname}
  onChange={handleFirstNameChange}
/>;
{
  firstNameError && <span>{firstNameError}</span>;
}

// ....

Looking pretty good, but imagine doing this for 5 input fields in a form, across 5 different forms in our app. If we decide to copy the same code over, we are bloating the codebase, and the headache would kick in if try to debug or extend the form.

Can we do better ?

Lets start by creating a custom hook and tracking the input change.

// ...

const useForm = () => {
  const [values, setValues] = React.useState({});

  const onChangeField = ({
    target: { name, value }
  }: React.ChangeEvent<HTMLInputElement>) => {
    setValues(prevState => ({ ...prevState, name: value }));
  };

  return { values, onChangeField };
};

// ...

const { values, onChangeField } = useForm();

<input
  type='text'
  name='firstname'
  value={values.firstname}
  onChange={onChangeField}
/>;

// ...

Now, lets add the initial field state.

// ...

const useForm = (props) => {
  const { initialState } = props;
  const [values, setValues] = React.useState(initialState || {});

  const onChangeField = ({
    target: { name, value }
  } => {
    setValues(prevState => ({ ...prevState, [name]: value }));
  };

  return { values, onChangeField };
};

// ...

const {values, onChangeField} = useForm({initialState: {
  firstname: 'John'
}})

<input type='text' name='firstname' onChange={onChangeField} value={values.firstname} />;

// ...

The key point here is that we use the name of each field as the key for the different pieces of state we create. So for example error.firstName will contain the error of the firstName field and touched.firstName will contain the touched state of firstName and so on.

Now lets throw in some validation and the form submit handler.

// ...

const useForm = props => {
  const [values, setValues] = React.useState(props.initialState || {});
  const [errors, setErrors] = React.useState({});

  const isFieldValid = (name: string, value: string) => {
    if (props.validator[name]) {
      return !!value.match(props.validator[name]);
    }
    return true;
  };

  const onChangeField = ({
    target: { name, value }
  }: React.ChangeEvent<HTMLInputElement>) => {
    if (!isFieldValid(name, value)) {
      setErrors(prevErrors => ({
        ...prevErrors,
        [name]: `Field '${name}' not valid !`
      }));
    } else {
      setErrors(prevErrors => ({ ...prevErrors, [name]: null }));
    }

    setValues(prevState => ({ ...prevState, [name]: value }));
  };

  const onSubmit = () => {
    if (props.onSubmit === "function") {
      props.onSubmit(values);
    }
  };

  return { values, onChangeField, errors, onSubmit };
}
  // ...

  const { onChangeField, values, errors, onSubmit } = useForm({
    initialState: { firstname: 'John' },
    validator: { firstname: /^[a-zA-Z]*$/ }
    onSubmit: vals => console.log(vals)
  });

  // ...
  <form onSubmit={onSubmit}>
    <div>
      <label>FirstName</label>
      <input
        type='text'
        name='firstname'
        onChange={onChangeField}
        value={values.firstname}
      />
      {errors.firstname && <span>{errors.firstname}</span>}
    </div>
  </form>
};

We've now built a truly portable hook that can handle forms in our app. We could keep going and add touched state, handle blur, field mount state, form submit state etc.

Source code

Checkout the full source at CodeSandbox

Conclusion

Using plain React could lead to making our components more readable and very maintainable. You can extend this hook and use across your app.

If you need a more mature library built with the same philosophy, checkout Formik. It has a fully fledged API with support for focus management, touched state, handling blur, support for React Native and more. It is one of most versatile form library out there !

Reference

Formik (try reading the source, it's beautiful ✨)

Exploring ES6 data structures

Joel Raju — Sun, 16 Feb 2020 16:49:16 +0000

Originally published on my blog.

Up & until ES5, arrays and objects have been the primary mechanism for creating data structures in JS. With the introduction of ES6 specification, some new and useful data structure abstractions have been added.

We'll be looking at

Map
WeakMap
Set
WeakSet
Typed Array

Map

If you've worked with JS objects, which are the primary mechanism for creating key/value pairs, then you are already familiar with maps.

const person = {
  name: 'John Doe',
  age: 30
};

The main limitation with normal objects is that keys have to be of string
type or an ES6 Symbol.

With ES6 Maps objects can also be used as keys. The [] bracket syntax has been replaced in favour of set and get .

* Working with Map *

const foo = { bar: 'baz' };

const person = new Map();
person.set('name', 'John Doe');
person.set('age', 30);
person.set(foo, { hello: 'world' }); // notice that object is used as a key
person.get(foo); // {'hello': 'world'}

Map comes with a handy helper has(...) which returns a boolean asserting whether a value has been associated to the key in the Map object or not.

person.has(foo); // true
person.has('foo'); // false

With normal objects one would use delete keyword to delete a property on an object. On a Map, we use delete(...) on the map object which returns true if the key exists and when its deleted, and false if not.

person.delete(foo); // true
person.delete(foo); // false - because foo has been deleted already

Use clear() to clear all key-value pairs on the map object.

person.clear(foo);

To get the list of keys, use keys(), which returns an iterator over the keys in the map:

const foo = { bar: 'baz' };

const person = new Map();
person.set('name', 'John Doe');
person.set('age', 30);
person.set(foo, { hello: 'world' });

const keys = [...person.keys()];

person.get(keys[0]); // John Doe
person.get(keys[1]); // 30
person.get(keys[2]); // {'hello': 'world'}

We could also use entries(), the default map iterator, on the map object with the good old for-of loop.

// Assuming we use the same person Map from above
for (let [key, val] of person.entries()) {
  console.log(`${key} = ${val}`);
}

// Output
// name = John Doe
// age = 30
// {'bar': 'baz'} = {'hello': 'world'}

Map API MDN Docs

WeakMap

A WeakMap works in the same way as Map but only allows objects as keys.

It mainly differs underneath, in how the memory is allocated (specifically Garbage Collection). In WeakMap the keys (objects only) are weakly referenced meaning that if the key object is GC'd then the entry in the weakmap is also removed. This behaviour is particularly useful if you are dealing with objects that you don't have complete control of like a DOM element.

const person = {
  name: 'John Doe',
  age: 30
};

const obj = {
  key1: {
    id: 1
  }
};

const personMap = new WeakMap();
personMap.set(obj.key1, person);

personMap.set('hello', 'world'); // TypeError: WeakMap key must be an object

personMap.has(obj.key1); // true
delete obj.key1; // true
personMap.has(obj.key1); // false because of weak reference on key1

Other thing to note is that WeakMap doesn't have clear() method like Map.

WeakMap API MDN Docs

Set

The mathematical definition of a Set.

A set is a well-defined collection of distinct objects, considered as an
object in its own right.

In ES6 a Set is collection of unique values (duplicates) are ignored. A set can contain primitve values like strings, numbers, boolean and also complex values like objects and other ES6 data structures (Maps, Sets, etc).

* Working with Set *

A Set can be created by invoking the Set() constructor. Additionally an array
of values can be passed to initialize it. Similar to the set() method on a
Map, Set has an add() method to add values but doesn't have a get(...)
method.

const set1 = new Set(['x', 'x', 'y', 'y', 'z', 'z', { hello: 'world' }]);
const set2 = new Set();
set2
  .add('x')
  .add('y')
  .add('z')
  .add({ hello: 'world' });

A Set has keys() and values() iterator which yields a list of unique values in the set.

const set1 = new Set(['x', 'y', 'z', { hello: 'world' }]);
const keys = [...set1.keys()];
const values = [...set1.values()];

console.log(keys[0]); // x
console.log(values[0]); // x

keys[1] === values[1]; // true

for (let val of set1.values()) {
  console.log(val);
}

// Output
// x
// y
// z
// {'hello': 'world'}

Use delete(...) to remove an entry from a Set and clear() to remove all entries in the Set.

const set1 = new Set(['x', 'y', 'z', { hello: 'world' }]);
set1.delete('x'); // true
set1.delete('p'); // false - as p doesn't exist
set1.clear();
[...set1.keys()].length; // 0

Set API MDN Docs

WeakSet

WeakSet is similar to a Set, but it holds its values weakly, meaning if the value object is GC'd then the entry is also removed from the weakset object. Another important distinction is that a WeakSet can contain only object values, primitive values like string, number, boolean are not allowed.

const obj = { id1: { hello: 'world' } };
const set1 = new WeakSet([obj.id1]);

set1.add('x'); // TypeError: WeakSet value must be an object

set1.has(obj.id1); // true
delete obj.id1; // true
set1.has(obj.id1); // false

WeakSet API MDN Docs

Typed Array

A Typed Array is a chunk of memory with a typed view inside, with array like access. Each entry in a Typed Array is a raw binary value in one of a number of supported formats, from 8-bit integers to 64-bit floating-point numbers. They provide support for arbitrary byte-based data structures to implement network protocols, cryptographic algorithms, file format manipulations, efficiently pass data to WebGL etc.

* Working with Typed Array *

const buff = new ArrayBuffer(32); // allocates 32 bytes of memory
buff.byteLength; // 32
buff[0] = 10;
buff[1] = 20;
buff[2] = buff[0] + buff[1]; // 30

// Floating point arrays.
var f64 = new Float64Array(8);
var f32 = new Float32Array(16);

// Signed integer arrays.
var i32 = new Int32Array(16);
var i16 = new Int16Array(32);
var i8 = new Int8Array(64);

// Unsigned integer arrays.
var u32 = new Uint32Array(16);
var u16 = new Uint16Array(32);
var u8 = new Uint8Array(64);
var pixels = new Uint8ClampedArray(64); // clamps input values between 0 and 255

Typed arrays shouldn't be confused with normal arrays. Array.isArray() on a typed array return false. Also, not all the methods on normal arrays are available on typed arrays.

Typed Array API MDN Docs

Reference

Use React Hooks & Context API to build a Redux style state container

Joel Raju — Wed, 12 Feb 2020 09:07:25 +0000

Originally published on my blog.

Update

This approach is best suited for low frequency state updates. Please check the performance section for more details.

State management is hard

State management is hard get right in complex React apps for most of us. State can include UI state like routes, form states, pagination, selected tabs, etc as well as the response from http calls, loading states, cached data etc.

Even at Facebook, they had difficulty in showing the correct notification count for chat messages.

The necessity to tame this increasing complexity gave rise to some interesting libraries and paradigms.

Some of the popular state-management libraries out there:

Redux might be the single most popular library used in tandem with React. It popularized the notion of uni-directional flow of data and made state updates predictable and manageable.

We'll try to build a utility with the same principles in mind, a single source of truth with uni-directional flow of data where state updates are performed by dispatching an action (pure functions).

Context API

Context provides a way to pass data through the component tree without having to pass props down
manually at every level.

Context is a powerful tool to have. In fact, Redux binding for React
itself uses the Context API. Along with the useReducer & useContext hooks we have all the pieces to build our state management utility.

Demo time

We'll be building a basic counter with 2 buttons to increment and decrement the count. Our global store will have a single piece of state called count. The demo will be using Typescript.

Building the global store and the reducer

First lets create the context object. It will have two properties the state object itself and the dispatch function.

// ...

const GlobalStateContext = createContext<{
  state: State;
  dispatch: (action: Action) => void;
}>({ state: INITIAL_STATE, dispatch: () => {} });

// ...

When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.

The reducer function is fairly the same as a Redux reducer, which performs state updates on incoming Action and then returning the new state.

Putting it all together.

import { createContext, Reducer } from 'react';
import { ActionTypes } from './globalActions';

interface State {
  count: number;
}

export const INITIAL_STATE: State = {
  count: 0
};

export interface Action {
  type: ActionTypes;
  payload?: any;
}

export const GlobalStateContext = createContext<{
  state: State;
  dispatch: (action: Action) => void;
}>({ state: INITIAL_STATE, dispatch: () => {} });

export const globalReducer: Reducer<State, Action> = (state, action) => {
  const { type } = action;
  switch (type) {
    case ActionTypes.INCREMENT:
      return { ...state, count: state.count + 1 };
    case ActionTypes.DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

We have 2 actions INCREMENT & DECREMENT and corresponding action creators which dispatches those actions.

export enum ActionTypes {
  INCREMENT = 'INCREMENT',
  DECREMENT = 'DECREMENT'
}

export const incrementAction = () => ({
  type: ActionTypes.INCREMENT
});

export const decrementAction = () => ({
  type: ActionTypes.DECREMENT
});

Connecting the store to the components

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. It receives a prop value consuming components that are descendants of this Provider.

useReducer is a hook that accepts the reducer and the initial state and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)

We need to wrap the root component of our app in the Provider, and pass the returned state and dispatch as the value prop.

// ...

const [globalState, dispatchToGlobal] = React.useReducer(
  globalReducer,
  INITIAL_STATE
);

return (
  <GlobalStateContext.Provider
    value={{ state: globalState, dispatch: dispatchToGlobal }}
  >
    <div className='App'>
      <Layout />
    </div>
  </GlobalStateContext.Provider>
);

// ...

At this point, our entire app has access to the global state and can dispatch actions to the store. Now lets connect the UI components to the store.

The useContext hook accepts a Context object and returns the current context value for that context, which in our case is the state & dispatch method.

import * as React from 'react';
import { GlobalStateContext } from './context/globalStore';
import { incrementAction, decrementAction } from './context/globalActions';

const Layout: React.FC = () => {
  const { state, dispatch } = React.useContext(GlobalStateContext);

  return (
    <div>
      <div>
        <h2>Count : {state.count}</h2>
      </div>
      <div>
        <button onClick={() => dispatch(incrementAction())}>Increment</button>
        <button onClick={() => dispatch(decrementAction())}>Decrement</button>
      </div>
    </div>
  );
};

export default Layout;

What about performance ?

As pointed out by @pinutz23 , this approach is suited for low frequency state updates. React Redux uses context internally but only to pass the Redux store instance down to child components - it doesn't pass the store state using context. It uses store.subscribe() to be notified of state updates.

Passing down the store state will cause all the descendant nodes to re-render.

See more about this here

Souce code

Checkout the full source at CodeSandbox

Conclusion

The state management utility we created here shows what's possible with React Hooks & Context API. This approach as it is, without any performance optimizations, is best suited for low frequency state updates like theme, localization, auth, etc. For high frequency updates I still use Redux and you should try it too.

Building a real-time chat with Socket.IO and ReactJS

Joel Raju — Sun, 09 Feb 2020 21:32:06 +0000

Originally published on my blog.

Why WebSockets ?

In the past, long polling was the primary way of implementing real time communication. Each request involves setting up a TCP connection by a three-way TCP handshake after the DNS lookup.

First the client sends its TCP sequence number and maximum segment size to the server. (SYNchronize)
Then the server responds by sending its sequence number and maximum segment size to the Client. (SYNchronize - ACKnowledgement)
And finally the client acknowledges receipt of the sequence number and segment size information. (ACKnowledgement)

Each packet is composed of an IP header and data (payload). In this case, the data section contains TCP. The TCP header contains various fields including the source and destination ports, sequence and acknowledgment numbers, window size, TCP flags, urgent pointer, and reserved bits.

Thus setting up a connection involves exchanging ~ 128-136 bytes of data between the server and the client. And tearing down the connection requires ~ 160 bytes by a four-way handshake.

So polling is not a viable option for a truly real-time connection.

What is a WebSocket ?

The WebSocket specification defines an API establishing "socket" connections between a web browser and a server. In plain words: There is an persistent fully duplex connection between the client and the server and both parties can start sending data at any time.

To establish a WebSocket connection, the browser sends a standard HTTP GET request to the server with Upgrade: websocket & Connection: websocket request header.

GET / HTTP/1.1
Host: localhost:3000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: FfYGmWUfXRS+21DRrCLfiQ==
Sec-WebSocket-Version: 13

The main advantage here over XHR request is that
once the connection is established it persists until the client or the server tears it down. So there is no need of performing the handshake on each request.

After running the demo, open the Network Tab in Dev Tools to see the WebSocket client handshake.

Enter Socket.IO

Socket.IO is a really popular library that enables real-time, bidirectional and event-based communication. But Socket.IO is not a WebSocket implementation, it uses WebSocket transport whenever possible, it adds some metadata to each packet: the packet type, the namespace and the packet id when a message acknowledgement is needed.

Building the WebSocket server

For this demo, we will be building a simple server that replys back what the client has sent.

Socket.IO has a robust event emitter mechanism build on top of Node's
EventEmitter, which provides
callbacks to events. The connection event (a system event) callback gets fired when a client gets connected.

// ....

io.on('connection', function(socket) {
  console.log('connected', socket);
});

// ....

After connection to the client is successful, all events on the live socket can be listened to by the event name.

// ....

io.on('connection', function(socket) {
  socket.on('event_name', function(data) {
    // here event_name is a custom event
    console.log('new event', data);
  });
});

// ....

We can create custom events, and send data to the clients connected on the socket using the emit method.

// ....

io.on('connection', function(socket) {
  socket.emit('event_name', {
    data: 'hello world'
  });
});

// ....

To close the current socket server use the close method.

// ....

io.close();

// ....

Putting it all together with the express server.

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const uniqid = require('uniqid');

const PORT = 3001;

const MESSAGE_TYPE = {
  SENT: 'SENT',
  RECEIVED: 'RECEIVED'
};

io.on('connection', function(socket) {
  socket.on('message', function(data) {
    socket.emit('message', {
      ...data,
      type: MESSAGE_TYPE.RECEIVED,
      timestamp: Date.now(),
      id: uniqid()
    });
  });
});

http.listen(PORT, function() {
  console.log('listening on *:3001');
});

app.get('/', function(req, res) {
  res.send('Hello World');
});

module.exports = {
  app: app
};

Building the web client

The web client is a basic 2 pane layout with contacts on the left and the chat messages on the right.

First we need to install the Socket.IO client library to establish
connection to the server. The io object constructor accepts a url and
options.

import io from 'socket.io-client';

const socket = io('http://localhost:3001', {
  query: {
    CLIENT_ID: 1234
  }
});

The query option allows to send query parameters when connecting to the namespace (then found in socket.handshake.query object on the server-side) which can be used to send token used to keep track of and identify clients, etc. The query content can also be updated on reconnection.

Similar to the server, events on the client can be listened to by the event name. In addition to user created events, Socket.IO client has a set of system events that can be subscribed to.

connect - Fired upon connecting
error - Fired upon a connection error
disconnect - Fired upon a disconnection
reconnect - Fired upon a successful reconnection
reconnect_attempt - Fired upon an attempt to reconnect
reconnecting - Fired upon an attempt to reconnect (receives reconnection attempt number as param)
reconnect_error - Fired upon a reconnection attempt error
reconnect_failed - Fired when couldn’t reconnect within reconnectionAttempts

Example usage of connect & disconnect event.

// ....

socket.on('connect', socket => {
  console.log('connnected to socket', socket);
});

socket.on('disconnect', reason => {
  console.log('socket connection disconnected', reason);
});

// ....

To send events to the server, we can use the emit method, which accepts an eventName, args and an ack callback.

// ....

socket.emit('event_name', { data: 'any data' }, function(res) {
  console.log('ack message', res);
});

// ....

Now lets wire up all the pieces in our redux actions, where we listen for events connect, disconnect and message (user created event). We also have an action to send messages.

import io from 'socket.io-client';
import uniqid from 'uniqid';

import {
  UPDATE_MESSAGE_HISTORY,
  CLIENT_ID,
  MESSAGE_TYPE,
  SET_CONNECTION_STATUS
} from '../constants';

const socket = io('http://localhost:3001', {
  query: {
    CLIENT_ID: CLIENT_ID
  }
});

const listenConnectionChange = () => dispatch => {
  socket.on('connect', () => {
    dispatch({
      type: SET_CONNECTION_STATUS,
      payload: true
    });
  });

  socket.on('disconnect', () => {
    dispatch({
      type: SET_CONNECTION_STATUS,
      payload: false
    });
  });
};

const sendMessage = message => (dispatch, getState) => {
  const { friendsReducer } = getState();
  const messageTemplate = {
    message,
    type: MESSAGE_TYPE.SENT,
    receiverId: friendsReducer.activeReceiver.id,
    timestamp: Date.now(),
    id: uniqid()
  };
  socket.emit('message', messageTemplate, function(res) {
    console.log('emit message');
  });

  dispatch({
    type: UPDATE_MESSAGE_HISTORY,
    payload: messageTemplate
  });
};

const listenForIncomingMessage = () => dispatch => {
  socket.on('message', message => {
    dispatch({
      type: UPDATE_MESSAGE_HISTORY,
      payload: message
    });
  });
};

export { sendMessage, listenForIncomingMessage, listenConnectionChange };

And the chat reducer consists of two objects messages & connectionStatus.

import { UPDATE_MESSAGE_HISTORY, SET_CONNECTION_STATUS } from '../constants';

const INITIAL_STATE = {
  messages: {},
  connectionStatus: false
};

export default function(state = INITIAL_STATE, action = {}) {
  switch (action.type) {
    case UPDATE_MESSAGE_HISTORY:
      const messageTemplate = {
        message: action.payload.message,
        type: action.payload.type,
        timestamp: action.payload.timestamp,
        id: action.payload.id
      };
      return {
        ...state,
        messages: {
          ...state.messages,
          [action.payload.receiverId]: state.messages[action.payload.receiverId]
            ? state.messages[action.payload.receiverId].concat(messageTemplate)
            : [].concat(messageTemplate)
        }
      };

    case SET_CONNECTION_STATUS:
      return { ...state, connectionStatus: action.payload };

    default:
      return state;
  }
}

We have another reducer which keeps the list of contacts and the active contact. The UI components are connected to the redux store renders the chat messages, contacts and the input box to send message.

Souce Code

Checkout the entire source code on GitHub.

DEV Community: Joel Raju

Handling multiple click events in React Native

Introduction to click events in React Native

Problem with Touchables

PanResponder to the rescue

Conclusion

Effective form handling using React Hooks

Introduction

Why forms state should be local ?

Handling form state locally

Can we do better ?

Source code

Conclusion

Reference

Exploring ES6 data structures

Map

WeakMap

Set

WeakSet

Typed Array

Reference

Use React Hooks & Context API to build a Redux style state container

Update

State management is hard

Context API

Demo time

Building the global store and the reducer

Connecting the store to the components

What about performance ?

Souce code

Conclusion

Building a real-time chat with Socket.IO and ReactJS

Why WebSockets ?

What is a WebSocket ?

Enter Socket.IO

Building the WebSocket server

Building the web client

Souce Code

Further reading