master

分支 (1)

管理

管理

master

learning-websocket
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Game1 Test Demo</title>
</head>

<body>

    <div id="mess">正在连接...</div>
    <div>
        <button id="state1" >发送</button>
        <a> 已发送：</a>
        <a id="sendnews"></a><br>
        <a>已接收:</a>
        <a id="receivenews"></a>
    </div>

    <script>
        var mess = document.getElementById("mess");
        if(window.WebSocket){
            //这里修改为本机IP地址
            var ws = new WebSocket('ws://127.0.0.1:8848');

            ws.onopen = function(e){
                console.log("连接服务器成功");
                mess.innerHTML = "连接成功"
                ws.send("连接成功",function(e){
                  console.log('这里偶吗')
                });
            }

            ws.onclose = function(e){
                console.log("服务器关闭");
                mess.innerHTML = "服务器关闭"
            }

            ws.onerror = function(){
                console.log("连接出错");
                mess.innerHTML = "连接出错"
            }

            //收到服务器数据后的回调函数
            ws.onmessage = function(e){
                document.getElementById("receivenews").innerHTML=e.data;
            }

            //设置点击事件
            document.getElementById("state1").onclick = function(e){
                console.log('之前',ws.readyState)   //这个是websocket的状态
                console.log('之前',ws.bufferedAmount)   //这个是数据发送的状态
                ws.send("客户端发送的呵呵哈哈哈");
                console.log('发送之后',ws.bufferedAmount)   //这个是数据发送的状态
                if(ws.bufferedAmount === 0)
                {
                    console.log('发送数据结束')
                }
                document.getElementById("sendnews").innerHTML="客户端发送的呵呵哈哈哈"
            }
        }
    </script>
</body>

</html>