1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
| <!DOCTYPE html> <html lang="en"> <head> <title>测试websocket</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css"> </head> <body> <div class="container"> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">用户</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>选择一个...</option> </select> </div> <div class="input-group mb-3"> <input type="text" class="form-control"> <div class="input-group-append"> <span class="input-group-text" id="btn1">发送给所有人</span> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control"> <div class="input-group-append"> <span class="input-group-text" id="btn2">发送给单人</span> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script> <script language=javascript> $(function () { var websocket; if ('WebSocket' in window) { console.log("WebSocket-->"); websocket = new WebSocket("ws://localhost:8020/ws"); } else if ('MozWebSocket' in window) { console.log("MozWebSocket-->"); websocket = new MozWebSocket("ws://ws"); } else { console.log("SockJS-->"); websocket = new SockJS("http://127.0.0.1:8020/sockjs/ws"); }
websocket.onopen = function (evnt) { console.log("链接服务器成功!", evnt.data); }; websocket.onmessage = function (evnt) { console.log('收到消息:', evnt.data); var json = JSON.parse(evnt.data); if (json.hasOwnProperty('users')) { var users = json.users; for (var i = 0; i < users.length; i++) { $("#inputGroupSelect01").append('<option value="' + users[i] + '">' + users[i] + '</option>'); } } else { toast(json.msg, 'info') } }; websocket.onerror = function (evnt) { }; websocket.onclose = function (evnt) { console.log("与服务器断开了链接!") } $('#btn2').bind('click', function () { if (websocket != null) { var value = $(this).parent().parent().find('input').val(); var name = $("#inputGroupSelect01").find("option:selected").val(); console.log('选中的用户', name); if (name === '选择一个...') { toast('请选择一个用户', 'warning') } else { var object = { to: name, msg: value, type: 2 }; var json = JSON.stringify(object); websocket.send(json); } } else { console.log('未与服务器链接.'); } }); $('#btn1').bind('click', function () { if (websocket != null) { var value = $(this).parent().parent().find('input').val(); var object = { msg: value, type: 1 }; var json = JSON.stringify(object); websocket.send(json); } else { console.log('未与服务器链接.'); } }); })
function toast(text, icon) { $.toast({ text: text, heading: '新消息', icon: icon, showHideTransition: 'slide', allowToastClose: true, hideAfter: 3000, stack: 5, position: 'top-right',
bgColor: '#444444', textColor: '#eeeeee', textAlign: 'left', loader: true, loaderBg: '#006eff' }); } </script> </body> </html>
|