master

分支 (1)

管理

管理

master

websocket_server
/
client.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div class="vertical-center">
        <div class="container">
            <!-- 客户端加一个简单的input输入框和一个发送按钮 -->
            <form role="form" id="chat_form" onsubmit="sendMessage(); return false;" style="margin-top:100px;">
                <div class="form-group">
                    <input class="form-control" type="text" name="message" id="message" value="" />
                </div>
                <button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">
                    发送
                </button>
            </form>
        </div>
    </div>
</body>
<script>
    //WebSocket实例化
    var ws = new WebSocket("ws://localhost:3001");
    ws.onopen = function (e) {
        //成功连接服务器回调
        console.log('客户端（client）：与服务器的连接已打开')
    }
    function sendMessage() {
        if(ws.readyState===1){
            const msg = document.getElementById('message').value
            ws.send(msg);
        }else {
            console.log('发送失败');
        }
    };
</script>

</html>