前端：websocket脚本

1.实现

<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
    var g_uuid ;
    var av_img = "http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eorADDRtpTzqxAIZZfVLGP3zpeDepNXq77iazZZT3zAm1icbib0bCvB6SwbBB5ycXcrPhFAN0kZvrGKw/132";

//    var wsUri ="ws://echo.websocket.org/";
//    var wsUri ="ws://localhost:8765/asdasd?path_name=default_key";
//    var wsUri ="ws://192.168.0.196:5211?uuid=" + g_uuid;
    var output;

    function init(g_uuid) {
        var wsUri ="ws://192.168.0.196:5211?uuid=" + g_uuid;
         document.getElementById('img_2').src = "http://test.account.ndmooc.com/v1/webapp/qrcode/" + g_uuid;
        output = document.getElementById("output");
        testWebSocket(wsUri);
    }

    function testWebSocket(wsUri) {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) {
            onOpen(evt)
        };
        websocket.onclose = function(evt) {
            onClose(evt)
        };
        websocket.onmessage = function(evt) {
            onMessage(evt)
        };
        websocket.onerror = function(evt) {
            onError(evt)
        };
    }

    function onOpen(evt) {
        writeToScreen("连接-onOpen-connected");
        //doSend('subscribe|[1.2]');
    }

    function onClose(evt) {
        writeToScreen("断开连接-onClose-disconnected");
    }

    function onMessage(evt) {
        writeToScreen('<span style="color: blue;">响应: '+ evt.data+'</span>');
        console.log(evt.data);
        x2 = eval('(' + evt.data + ')');
        console.log(x2);
       if(x2['act'] == 1002){
           writeToScreen('<span style="color: blue;">响应: '+ ' 显示切换登录界面（显示用户头像及 切换帐号 按钮）' +'</span>');
           document.getElementById('img_2').src = av_img;
       }
        //x = $.parseJSON(evt.data);
//        console.log(x);
        //websocket.close();
    }

    function onError(evt) {
        writeToScreen('<span style="color: red;">错误:</span> '+ evt.data);
    }

    function doSend(message) {
        writeToScreen("发送: " + message);
        websocket.send(message);
    }

    function writeToScreen(message) {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
        output.appendChild(pre);
    }

   // window.addEventListener("load", init, false);

</script>
<h2>WebSocket Test1</h2>
<div id="output"></div>
<img id="img_2" src="http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eorADDRtpTzqxAIZZfVLGP3zpeDepNXq77iazZZT3zAm1icbib0bCvB6SwbBB5ycXcrPhFAN0kZvrGKw/132">
<form id="emit">
    <input id="emit_data" type="text" name="emit">
    <button type="submit" id="button1"> 提 交 </button>
</form>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>

 $('form#emit').submit(function(event) {
    console.log($('#emit_data').val());
    var aa = $('#emit_data').val();
    doSend(aa);
    $('#log').append('<p>request: ' + $('#emit_data').val() + '</p>');
    return false;
    });

   $(function(){
        console.log(11111111111);
         $.ajax({
             type: "GET",
             url: "http://test.account.ndmooc.com/v1/webapp/generate_uuid?appid=123",
             data: {},
             dataType: "json",
             success: function(data){
                         console.log(data);
                         console.log(data['data']['uuid']);
                         g_uuid = data['data']['uuid']
                         init(g_uuid)
                      }
         });

});
</script>
</html>

相关阅读:
1. 初探--prometheus调研
 Spring boot采坑记--- 在启动时RequstMappingHandlerMapping无法找到部分contorller类文件的解决方案
 Servlet——映射细节、3.0注解配置、线程不安全问题
 Servlet——概述、实现方式、生命周期、ServletConfig类
 HTTP——概述、请求和响应、GET和POST请求
 Tomcat——简介、目录结构等
 XML解析——Dom4j解析器
 XML解析——Jsoup解析器
 XML解析——Jaxp解析器
 XML——简介、语法、约束、解析
原文地址：https://www.cnblogs.com/rixian/p/13754777.html