<!DOCTYPE html> <html> <head> <title>WebSocket/SockJS Echo Sample (Adapted from Tomcat's echosample)</title> <style type="text/css"> #console_container { float: left; width: 400px } #console_container div { padding: 5px; } #console_container { float: left; margin-left: 15px; width: 400px; } #console { border: 1px solid #CCCCCC; border-right-color: #999999; border-bottom-color: #999999; height: 170px; overflow-y: scroll; padding: 5px; width: 100%; } #console p { padding: 0; margin: 0; } #message{ width: 350px; } </style> <!-- 兼容所有浏览器 自行查看在此不过多介绍--> <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script> <script type="text/javascript"> var ws = null; var url = null; var transports = []; // 操作忌用属性 function setConnected(connected) { document.getElementById('connect').disabled = connected; document.getElementById('close_connect').disabled = !connected; document.getElementById('requser_message').disabled = !connected; } // 连接服务 function connect() { alert("url:"+url); if (!url) { alert('Select whether to use W3C WebSocket or SockJS'); return; } // 判断浏览器是否支持 WebSocket ws = (url.indexOf('sockjs') != -1) ? new SockJS(url, undefined, {protocols_whitelist: transports}) : new WebSocket(url); // 连接 ws.onopen = function () { setConnected(true); renderLog('客户端onopen: 嗨!连接打开了.'); }; // 接收服务端返回数据 调用render方法输出模版页面 ws.onmessage = function (event) { try { renderLog('服务端msg: ' + event.data); } catch (error) { renderLog('服务端msg: error' + JSON.stringify(event.data)); } }; //关闭连接 ws.onclose = function (event) { setConnected(false); renderLog('客户端onclose: 哇!连接关闭了'); renderLog(event); }; } //关闭连接 function closeConnect() { if (ws != null) { ws.close(); ws = null; } setConnected(false); } // 客户端 必须建立连接 TCP连接 function requserMessage() { if (ws != null) { var message = document.getElementById('message').value; renderLog('客户端send: ' + message); ws.send(message); } else { alert('connection not established, please connect.'); } } function selectUpdateUrl(urlPath) { if (urlPath.indexOf('sockjs') != -1) { url = urlPath; document.getElementById('sockJsTransportSelect').style.visibility = 'visible'; }else { if (window.location.protocol == 'http:') { // 如果http url = 'ws://' + window.location.host + urlPath; } else { //安全的WebSocket协议 如果https url = 'wss://' + window.location.host + urlPath; } document.getElementById('sockJsTransportSelect').style.visibility = 'hidden'; } } // 选择 sockjs 连接方式 function updateTransport(transport) { alert(transport); transports = (transport == 'all') ? [] : [transport]; } // 输出服务端返回信息 function renderLog(message) { var renderLog = document.getElementById('render_log'); var p = document.createElement('p'); p.style.wordWrap = 'break-word'; p.appendChild(document.createTextNode(message)); renderLog.appendChild(p); while (renderLog.childNodes.length > 25) { renderLog.removeChild(renderLog.firstChild); } renderLog.scrollTop = renderLog.scrollHeight; } </script> </head> <body> <noscript> <h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable Javascript and reload this page!</h2> </noscript> <div> <div id="connect-container"> <input id="radio1" type="radio" name="group1" onclick="selectUpdateUrl('/websocket');"> <label for="radio1">W3C WebSocket</label> <br> <input id="radio2" type="radio" name="group1" onclick="selectUpdateUrl('/sockjs/webSocketServer');"> <label for="radio2">SockJS</label> <div id="sockJsTransportSelect" style="visibility: hidden;"> <span>SockJS transport:</span> <select onchange="updateTransport(this.value)"> <option value="all">all</option> <option value="websocket">websocket</option> <option value="xhr-polling">xhr-polling</option> <option value="jsonp-polling">jsonp-polling</option> <option value="xhr-streaming">xhr-streaming</option> <option value="iframe-eventsource">iframe-eventsource</option> <option value="iframe-htmlfile">iframe-htmlfile</option> </select> </div> <div> <button id="connect" onclick="connect();">连接</button> <button id="close_connect" disabled="disabled" onclick="closeConnect();">断开</button> </div> <div> <textarea id="message">Here is a message!</textarea> </div> <div> <button id="requser_message" onclick="requserMessage();" disabled="disabled">发送消息</button> </div> </div> <div id="console_container"> <div id="render_log"></div> </div> </div> </body> </html>