schtonn
/
public


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
							<!DOCTYPE html>
<html>

<head>
    <title>websocket demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .row {
            margin: 1rem
        }
    </style>
</head>

<body>
    <div class='row'>发送方：
        <select id='sender'>
            <option value="Bob" selected>Bob</option>
            <option value="Alice">Alice</option>
            <option value="Jack">Jack</option>
        </select>
    </div>
    <div class='row'>接收方：
        <select id='receiver'>
            <option value="Bob">Bob</option>
            <option value="Alice" selected>Alice</option>
            <option value="Jack">Jack</option>
        </select>
    </div>
    <textarea id='msg' class='row' rows="10" cols="30"></textarea>
    <div class='row'>
        <button id='sendBtn'>发送</button>
    </div>
    <h3 class='row'>收到的消息:</h3>
    <div id='conversation' class='row'></div>
    <script>
        var sender = document.getElementById('sender');
        var receiver = document.getElementById('receiver');
        var conversation = document.getElementById('conversation');
        var sendBtn = document.getElementById('sendBtn');
        var socket = null;
        var createSocket = function () {
            if (socket) {
                socket.close();
            }
            var url = 'ws://' + window.location.host + '/ws/' + sender.options[sender.selectedIndex].value;
            socket = new WebSocket(url);
            socket.onopen = function () {
                console.log('connected to ' + url);
            }
            socket.onmessage = function (event) {
                var data = JSON.parse(event.data);
                conversation.innerHTML = conversation.innerHTML + data.from + ':' + data.content + '<br/>';
            }
            socket.onclose = function () {
                console.log('close connect to' + url);
            }
        };
        var sendMessage = function () {
            var msg = document.getElementById('msg').value;
            var bd=JSON.stringify({
                from: sender.options[sender.selectedIndex].value,
                content: msg,
                to: receiver.options[receiver.selectedIndex].value
            })
            console.log(bd)
            fetch('/rest/message', {
                method: 'POST',
                headers: {
                    'Content-type': 'application/json',
                },
                body: bd
            }).then(res => {
                return res.json();
            }).then(data => {
                if (!data.succeed) {
                    alert(data.msg);
                }
            })
        };

        sender.onchange = function () {
            createSocket();
        }

        sendBtn.onclick = function () {
            sendMessage();
        }

        createSocket();

    </script>
</body>

</html>