Implement WebSocket to fetch measurement

See also: #10

wlm-ui/src/MainPage/Channel/Channel.tsx

@@ -2,7 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { AppDispatch } from '../../store';
-import { channelListActions, SettingType, ChannelInfo } from '../../store/slices/channel/channel';
+import {
+    channelListActions, SettingType, MeasurementType, ChannelInfo
+} from '../../store/slices/channel/channel';
 import './Channel.scss';
 
 interface IProps extends ChannelInfo {
@@ -30,6 +32,20 @@ const Channel = (props: IProps) => {
         return () => socket.close();
     }, [dispatch, props.channel.channel]);
 
+    useEffect(() => {
+        const channel = props.channel.channel;
+        const socket = new WebSocket(
+            `${process.env.REACT_APP_WEBSOCKET_URL}/measurement/${channel}/`);
+
+        socket.onmessage = event => {
+            const data = JSON.parse(event.data) as MeasurementType;
+            dispatch(channelListActions.fetchMeasurement(
+                { channel: channel, measurement: data }));
+        };
+
+        return () => socket.close();
+    }, [dispatch, props.channel.channel]);
+
     useEffect(() => {
         setIsInUseButtonEnabled(true);
     }, [props.inUse]);

wlm-ui/src/store/slices/channel/channel.ts

@@ -94,6 +94,14 @@ export const channelListSlice = createSlice({
                 info.setting.period = period;
             }
         },
+        fetchMeasurement: (
+            state,
+            action: PayloadAction<Pick<ChannelType, 'channel'> & { measurement: MeasurementType }>
+        ) => {
+            const { channel, measurement } = action.payload;
+            const info = getChannelInfoWithException(state, channel);
+            info.measurements.push(measurement);
+        },
     },
     extraReducers: (builder) => {
         builder