Trading-Engine/test-websocket.html at main · akhilkumar-dot/Trading-Engine · 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
<!DOCTYPE html>
<html>
<head>
    <title>Live Stock Prices</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <style>
        body { font-family: Arial; padding: 20px; background: #1a1a2e; color: white; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #333; }
        th { background: #16213e; }
        .positive { color: #00ff88; }
        .negative { color: #ff4444; }
        h1 { color: #00ff88; }
    </style>
</head>
<body>
    <h1>📈 Live Market Data</h1>
    <table>
        <thead>
            <tr>
                <th>Symbol</th>
                <th>Price</th>
                <th>Open</th>
                <th>High</th>
                <th>Low</th>
                <th>Change %</th>
            </tr>
        </thead>
        <tbody id="priceTable"></tbody>
    </table>

    <script>
        const socket = new SockJS('http://localhost:8085/ws');
        const stompClient = Stomp.over(socket);

        stompClient.connect({}, function(frame) {
            console.log('Connected: ' + frame);

            stompClient.subscribe('/topic/prices/all', function(message) {
                const prices = JSON.parse(message.body);
                updateTable(prices);
            });
        });

        function updateTable(prices) {
            const tbody = document.getElementById('priceTable');
            tbody.innerHTML = '';
            prices.forEach(stock => {
                const row = document.createElement('tr');
                const changeClass = stock.changePercent >= 0
                    ? 'positive' : 'negative';
                const changeSign = stock.changePercent >= 0 ? '+' : '';
                row.innerHTML = `
                    <td><strong>${stock.symbol}</strong></td>
                    <td>₹${stock.currentPrice.toFixed(2)}</td>
                    <td>₹${stock.openPrice.toFixed(2)}</td>
                    <td>₹${stock.highPrice.toFixed(2)}</td>
                    <td>₹${stock.lowPrice.toFixed(2)}</td>
                    <td class="${changeClass}">
                        ${changeSign}${stock.changePercent.toFixed(2)}%
                    </td>
                `;
                tbody.appendChild(row);
            });
        }
    </script>
</body>
</html>