zoukankan      html  css  js  c++  java
  • web socket client

    <!DOCTYPE HTML>

    <html>

    <head>

        <title>My WebSocket</title>

    </head>

    <body>

    Welcome<br/>

    <input id="text" type="text" /><button onclick="send()">Send</button>    <button onclick="closeWebSocket()">Close</button>

    <div id="message">

    </div>

    </body>

    <script type="text/javascript">

        var websocket = null;

        //判断当前浏览器是否支持WebSocket

        if('WebSocket' in window){

            websocket = new WebSocket("ws://localhost:8082/my-websocket");

        }

        else{

            alert('Not support websocket')

        }

        //连接发生错误的回调方法

        websocket.onerror = function(){

            setMessageInnerHTML("error");

        };

        //连接成功建立的回调方法

        websocket.onopen = function(event){

            setMessageInnerHTML("open");

        }

        //接收到消息的回调方法

        websocket.onmessage = function(event){

            setMessageInnerHTML(event.data);

        }

        //连接关闭的回调方法

        websocket.onclose = function(){

            setMessageInnerHTML("close");

        }

        //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。

        window.onbeforeunload = function(){

            websocket.close();

        }

        //将消息显示在网页上

        function setMessageInnerHTML(innerHTML){

            document.getElementById('message').innerHTML += innerHTML + '<br/>';

        }

        //关闭连接

        function closeWebSocket(){

            websocket.close();

        }

        //发送消息

        function send(){

            var message = document.getElementById('text').value;

            websocket.send(message);

        }

    </script>

    </html>

  • 相关阅读:
    分布式事务之可靠消息
    分布式事务之本地消息表
    分布式事务
    数据库之 事务
    WePY开发小程序(二):项目入口及注册页面、组件
    WePY开发小程序(一):入门
    vue学习笔记-事件监听
    vue学习笔记-列表渲染
    vue学习笔记-缩写
    vue学习笔记-常用指令
  • 原文地址:https://www.cnblogs.com/wblade/p/8578543.html
Copyright © 2011-2022 走看看