webScoket(angular.js、vue.js )分别实现，实时接收后台发送过来的数据信息！转载（已测试通过）

最新推荐文章于 2024-07-21 20:35:23 发布

冉然

最新推荐文章于 2024-07-21 20:35:23 发布

阅读量2.4k

点赞数 2

分类专栏： html5 VUE

html5 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

VUE

15 篇文章 0 订阅

订阅专栏

VUE.js实现    angular.js    http://www.cnblogs.com/goodhelper(这个人博客很厉害，可以关注)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>My WebSocket</title>
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.js"></script>
</head>
<body>
Welcome To My WebSocket.<br/><br/>
<div id="ws">
    <input id="text" type="text"/>
    <button οnclick="sendMsg()">Send</button>
    <button οnclick="closeWS()" :disabled="!opened">Close</button>
    <button οnclick="openWS()" :disabled="opened">Open</button>
    <div v-html="msg"></div>
</div>
</body>
<script type="text/javascript">

    var websocket = null;

    var wsVue = new Vue({
        el: '#ws',
        data: {
            msg: "welcome to my websocket...<br/>",
            opened: false
        },
        mounted: function () {
            initWs();
        }
    });

    function initWs() {
        //check if your browser supports WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://(服务端的地址，且支持跨域，不需要添加http://,只需要：端口：例如：192.168.1.73:10101)/my-websocket");
        }
        else {
            alert('Sorry, websocket not supported by your browser.')
        }

        //Error callback
        websocket.onerror = function () {
            setMessageContent("error!");
            wsVue.opened = false;
        };

        //socket opened callback
        websocket.onopen = function (event) {
            setMessageContent("websocket opened");
            wsVue.opened = true;
        }

        //message received callback
        websocket.onmessage = function (event) {
            setMessageContent(event.data);
        }

        //socket closed callback
        websocket.onclose = function () {
            setMessageContent("websocket closed");
            wsVue.opened = false;
        }

        //when browser window closed, close the socket, to prevent server exception
        window.onbeforeunload = function () {
            websocket.close();
        }
    }

    //update message to vue and then in div
    function setMessageContent(content) {
        wsVue.msg += content + '<br/>';
    }

    //click to close the websocket
    function closeWS() {
        websocket.close();
        wsVue.opened = false;
    }

    //click to open the websocket
    function openWS() {
        initWs();
    }

    //click to send message
    function sendMsg() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>