| 提交 | 用户 | age | ||
| a6a76f | 1 | <script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script> |
| F | 2 | <body> |
| 3 | Welcome<br/>呢称<input id="userid" type="text"/><br/> | |
| 4 | <input id="text" type="text"/> | |
| 5 | <button onclick="send()">发送消息</button> | |
| 6 | <hr/> | |
| 7 | <button onclick="closeWebSocket()">关闭WebSocket连接</button> | |
| 8 | <hr/> | |
| 9 | <div id="message"></div> | |
| 10 | </body> | |
| 11 | <script type="text/javascript"> | |
| 12 | $(function() { | |
| 13 | var websocket = null; | |
| 14 | ||
| 15 | //判断当前浏览器是否支持WebSocket | |
| 16 | if ('WebSocket' in window) { | |
| 17 | websocket = new WebSocket("ws://" + document.location.host + "/websocket/derr"); | |
| 18 | } else { | |
| 19 | alert('当前浏览器 Not support websocket') | |
| 20 | } | |
| 21 | ||
| 22 | //连接发生错误的回调方法 | |
| 23 | websocket.onerror = function() { | |
| 24 | setMessageInnerHTML("WebSocket连接发生错误"); | |
| 25 | }; | |
| 26 | ||
| 27 | //连接成功建立的回调方法 | |
| 28 | websocket.onopen = function() { | |
| 29 | setMessageInnerHTML("WebSocket连接成功"); | |
| 30 | } | |
| 31 | ||
| 32 | //接收到消息的回调方法 | |
| 33 | websocket.onmessage = function(event) { | |
| 34 | setMessageInnerHTML(event.data); | |
| 35 | } | |
| 36 | ||
| 37 | //连接关闭的回调方法 | |
| 38 | websocket.onclose = function() { | |
| 39 | setMessageInnerHTML("WebSocket连接关闭"); | |
| 40 | } | |
| 41 | ||
| 42 | //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 | |
| 43 | window.onbeforeunload = function() { | |
| 44 | closeWebSocket(); | |
| 45 | } | |
| 46 | ||
| 47 | //关闭WebSocket连接 | |
| 48 | function closeWebSocket() { | |
| 49 | websocket.close(); | |
| 50 | } | |
| 51 | }) | |
| 52 | </script> | |
