js做为websocket client，服务用java 点对点、一对多聊天

时间 2019-11-11

标签做为 websocket client 服务 java 点对点一对多聊天栏目 JavaScript 繁體版

原文原文链接

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前端