js做爲websocket client,服務用java 點對點、一對多聊天

js做爲websocket client,服務用java 點對點、一對多聊天

  • 今天就分享前端的websokcet處理
    websocket處理就是一個客服端和服務端之間的長鏈接
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>聊天室</title>
    <style>
        #message {
            margin-top: 20px;
            border: 1px solid gray;
            padding: 20px;
        }
    </style>

</head>

<body>

    暱稱:<input type="text" id="nickname" />
    <!-- <button onclick="conectWebSocket()">鏈接WebSocket</button> -->
    <button onclick="initws()">鏈接WebSocket</button>
    <button onclick="closeWebSocket()">斷開鏈接</button>

    <br /> 消息:
    <input id="text" type="text" /> 頻道號
    <input id="toUser" type="text" />
    <button onclick="send()">發送消息</button>

    <!-- 存放接收到的消息. -->
    <div id="message">

    </div>


    <script type="text/javascript">
        //鏈接對象.
        var websocke = null;
        var nickname = null;
        var uid = null;

        function conectWebSocket() {
            nickname = document.getElementById("nickname").value;
            if (nickname == '') {
                alert("請輸入暱稱");
                return;
            }
            //判斷當前的瀏覽器是否支持websocket.
            if ("WebSocket" in window) {
                uid = "sdaaaaaaaaaaaaaaaaaaaaaaaaa";
                websocket = new WebSocket("ws://localhost:8080/websocket/" + nickname + "/" + uid);
            } else {
                alert("Not support websocket");
                return false;
            }
            //鏈接成功的方法.
            websocket.onopen = function(event) {
                setMessgeHtml("Loc MSG:已鏈接");
            }

            //鏈接關閉.
            websocket.onclose = function(event) {
                // aler
                setMessgeHtml("Loc MSG:鏈接關閉");
            }

            //鏈接異常.
            websocket.onerror = function(event) {
                setMessgeHtml("Loc MSG:鏈接異常");
            }


            websocket.onmessage = function(event) {
                console.log("fallback :", event);
                setMessgeHtml(event.data);
            }

        } //conectWebSocket


        var single = (function() {
            return {
                getInstance: function() {
                    if (websocke != null && websocke.readyState == 1) {
                        console.log("wlx-------------------" + websocke.readyState)
                        setMessgeHtml("Loc MSG:不能重複鏈接!");
                        return websocke
                    } else {
                        websocket = null
                        nickname = document.getElementById("nickname").value;
                        if (nickname == '') {
                            alert("請輸入暱稱");
                            return;
                        }
                        //判斷當前的瀏覽器是否支持websocket.
                        if ("WebSocket" in window) {
                            uid = "sdaaaaaaaaaaaaaaaaaaaaaaaaa";
                            websocket = new WebSocket("ws://localhost:8080/websocket/" + nickname + "/" + uid);
                        } else {
                            alert("Not support websocket");
                            return false;
                        }
                        //鏈接成功的方法.
                        websocket.onopen = function(event) {
                            setMessgeHtml("Loc MSG:已鏈接");
                        }

                        //鏈接關閉.
                        websocket.onclose = function(event) {
                            // aler
                            setMessgeHtml("Loc MSG:鏈接關閉");
                        }

                        //鏈接異常.
                        websocket.onerror = function(event) {
                            setMessgeHtml("Loc MSG:鏈接異常");
                        }


                        websocket.onmessage = function(event) {
                            console.log("fallback :", event);
                            setMessgeHtml(event.data);
                        }
                        return websocket;
                    } //conectWebSocket
                }
            }
        })();

        function initws() {
            websocke = single.getInstance()
        }



        function setMessgeHtml(msg) {
            var message = document.getElementById("message");
            message.innerHTML += msg + "<br/>";
        }

        function closeWebSocket() {
            websocke.close();
        }
        /**
            發送消息.
        */
        function send() {
            var message = document.getElementById("text").value;
            var toUser = document.getElementById("toUser").value;
            var socketMsg = {
                msg: message,
                toUser: toUser
            };
            if (toUser == '') {
                socketMsg.type = 0; //羣聊.
            } else {
                socketMsg.type = 1; //單聊.
            }
            console.log("發送的是:", socketMsg);
            console.log("鏈接狀態:", websocke.readyState);
            //websocket.send(nickname+":"+message);
            websocke.send(JSON.stringify(socketMsg)); //將json對象轉換爲json字符串.
        }
    </script>
</body>

</html>

websocket 要使用js單例模式,避免點擊一個鏈接的在發送消息的時候會收到兩個同樣的文件javascript

ps: 服務端代碼有需求未完善,稍後分享html

轉載請說明出處:http://www.javashuo.com/article/p-hztuartr-dr.html前端

相關文章
相關標籤/搜索