websocket-visualization/index.html at client · 0xdanieltran/websocket-visualization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Real-time voltage monitoring</title>
    <meta charset="utf-8" />

    <!-- Flexbox styling to have the chart and header fill the page.
        Chart will take as much space as possible. -->
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #chart {
            height: 100%;
        }
    </style>
</head>

<body class="box">
    <div id="chart" class="row content"></div>
    <script src="lcjs.iife.js"></script>
    <script>
    </script>
    <script>
        const {
            lightningChart,
            emptyFill,
            SolidFill,
            ColorHEX,
            SolidLine,
            AxisTickStrategies,
            AxisScrollStrategies,
            synchronizeAxisIntervals
        } = lcjs

        const dateOrigin = new Date()

        if (! window.WebSocket) {
            alert('Websocket not supported by browser.')
        } else {
            const socket = new WebSocket('ws://localhost:8081');
            socket.addEventListener('open', () => {
                console.log('open')
            })
            socket.addEventListener('close', () => {
                console.log('close')
            })
            socket.onmessage = (e) => {
                let msg = JSON.parse(e.data)

                if (msg.id === 'info') {
                    const { channels, xIntervalSeconds } = msg
                    const dashboard = lightningChart().Dashboard({
                        container: 'chart',
                        numberOfColumns: 1,
                        numberOfRows: channels.length
                    })

                    const charts = channels.map((channel, iChannel) => {
                        const chart = dashboard.createChartXY({
                            columnIndex: 0,
                            rowIndex: iChannel
                        })
                            .setTitle('')
                        if (iChannel > 0) chart.setTitleFillStyle(emptyFill)

                        const axisX = chart.getDefaultAxisX()
                            .setTickStrategy(AxisTickStrategies.Empty)
                            .setScrollStrategy(AxisScrollStrategies.progressive)
                            .setInterval(-xIntervalSeconds * channel.frequencyHz, 0)

                        const axisY = chart.getDefaultAxisY()
                        if ('name' in channel)
                            axisY
                                .setTitle(`${channel.name} ${channel.frequencyHz} Hz`)
                                .setTitleFont((font) => font.setSize(10))

                        return chart
                    })

                    const series = charts.map((chart, iChannel) => {
                        const channel = channels[iChannel]
                        const nSeries = chart.addLineSeries({
                            dataPattern: {
                                pattern: 'ProgressiveX',
                                regularProgressiveStep: true,
                            }
                        })
                            .setDataCleaning({ minDataPointCount: 1 })
                            .setStrokeStyle(stroke => stroke.setThickness(1))
                        if ('name' in channel) nSeries.setName(channel.name)
                        if ('color' in channel) nSeries.setStrokeStyle((style) => style.setFillStyle(new SolidFill({color: ColorHEX(channel.color)})))
                        return nSeries
                    })

                    let tFirstData
                    let sumDataPoints = 0
                    let sumCommunicationBytes = 0
                    socket.onmessage = async (e) => {
                        const blob = e.data
                        sumCommunicationBytes += blob.size
                        const arrayBuffer = await blob.arrayBuffer()
                        let arrayBufferBytePos = 0
                        // Read metadata bytes length as Uint16 at very start of binary message.
                        const metadataLengthByteLength = 2
                        const metaDataByteLength = new Uint16Array(arrayBuffer.slice(arrayBufferBytePos, arrayBufferBytePos + metadataLengthByteLength))[0]
                        arrayBufferBytePos += metadataLengthByteLength

                        // Read metadata as Uint8 array of known byte length.
                        const metaDataBinary = new Uint8Array(arrayBuffer.slice(arrayBufferBytePos, arrayBufferBytePos + metaDataByteLength))
                        arrayBufferBytePos += metaDataByteLength
                        const metaDataString = String.fromCharCode.apply(null, metaDataBinary)
                        const metaData = JSON.parse(metaDataString)

                        // Read new sample values as Float32 with known new samples count per channel.
                        // Start reading from nearest multiple of 4.
                        arrayBufferBytePos = Math.ceil(arrayBufferBytePos / 4) * 4
                        const channelsNewSamplesFloat32 = []
                        metaData.channelNewSampleCountList.forEach((channelNewSamplesCount, iCh) => {
                            const newSamplesByteLength = channelNewSamplesCount * Float32Array.BYTES_PER_ELEMENT
                            channelsNewSamplesFloat32.push(new Float32Array(arrayBuffer.slice(arrayBufferBytePos, arrayBufferBytePos + newSamplesByteLength)))
                            arrayBufferBytePos += newSamplesByteLength
                        })

                        tFirstData = tFirstData || Date.now()
                        series.forEach((nSeries, iChannel) => {
                            const chNewValuesY = channelsNewSamplesFloat32[iChannel]
                            nSeries.addArrayY(chNewValuesY)
                            sumDataPoints += chNewValuesY.length
                        })
                    }

                    let fps = 0
                    ;(() => {
                        let tStart = Date.now()
                        let frames = 0
                        const recordFrame = () => {
                            frames++
                            const tNow = Date.now()
                            fps = 1000 / ((tNow - tStart) / frames)
                            requestAnimationFrame(recordFrame)
                        }
                        requestAnimationFrame(recordFrame)

                        setInterval(() => {
                            tStart = Date.now()
                            frames = 0
                        }, 5000)
                    })();

                    setInterval(() => {
                        const now = Date.now() - tFirstData
                        const dataPointsRate = sumDataPoints / (now / 1000)
                        const commBytesRate = sumCommunicationBytes / (now / 1000)
                        charts[0].setTitle(`Streaming web socket data | ${Math.round(dataPointsRate)} points / second | FPS: ${fps.toFixed(1)} | Bandwidth: ~${((commBytesRate / 1024).toFixed(0))} KB/s`)
                    }, 1000)

                }
            }
        }
    </script>

</body>

</html>