欢迎访问悦橙教程（wld5.com），关注java教程。悦橙教程  java问答|  每日更新
页面导航 : > > 文章正文

用JavaEE7、Websockets和GlassFish4打造聊天室（一）(1)(3)

来源： javaer 分享于  点击 26437 次 点评：56

通过Bootstrap、Javacsript搭建简易客户端

最后，我们综合运用著名的Bootstrap、jQuery框架和Javascript设计一个简易的客户端。我们在src/main/weapp目录下新建立index.html文件，代码如下：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. [..] 
  5. <script> 
  6.     var wsocket; 
  7.     var serviceLocation = "ws://0.0.0.0:8080/hascode/chat/"; 
  8.     var $nickName; 
  9.     var $message; 
  10.     var $chatWindow; 
  11.     var room = ''; 
  12.   
  13.     function onMessageReceived(evt) { 
  14.         //var msg = eval('(' + evt.data + ')'); 
  15.         var msg = JSON.parse(evt.data); // native API 
  16.         var $messageLine = $('<tr><td class="received">' + msg.received 
  17.                 + '</td><td class="user label label-info">' + msg.sender 
  18.                 + '</td><td class="message badge">' + msg.message 
  19.                 + '</td></tr>'); 
  20.         $chatWindow.append($messageLine); 
  21.     } 
  22.     function sendMessage() { 
  23.         var msg = '{"message":"' + $message.val() + '", "sender":"' 
  24.                 + $nickName.val() + '", "received":""}'; 
  25.         wsocket.send(msg); 
  26.         $message.val('').focus(); 
  27.     } 
  28.   
  29.     function connectToChatserver() { 
  30.         room = $('#chatroom option:selected').val(); 
  31.         wsocket = new WebSocket(serviceLocation + room); 
  32.         wsocket.onmessage = onMessageReceived; 
  33.     } 
  34.   
  35.     function leaveRoom() { 
  36.         wsocket.close(); 
  37.         $chatWindow.empty(); 
  38.         $('.chat-wrapper').hide(); 
  39.         $('.chat-signin').show(); 
  40.         $nickName.focus(); 
  41.     } 
  42.   
  43.     $(document).ready(function() { 
  44.         $nickName = $('#nickname'); 
  45.         $message = $('#message'); 
  46.         $chatWindow = $('#response'); 
  47.         $('.chat-wrapper').hide(); 
  48.         $nickName.focus(); 
  49.   
  50.         $('#enterRoom').click(function(evt) { 
  51.             evt.preventDefault(); 
  52.             connectToChatserver(); 
  53.             $('.chat-wrapper h2').text('Chat # '+$nickName.val() + "@" + room); 
  54.             $('.chat-signin').hide(); 
  55.             $('.chat-wrapper').show(); 
  56.             $message.focus(); 
  57.         }); 
  58.         $('#do-chat').submit(function(evt) { 
  59.             evt.preventDefault(); 
  60.             sendMessage() 
  61.         }); 
  62.   
  63.         $('#leave-room').click(function(){ 
  64.             leaveRoom(); 
  65.         }); 
  66.     }); 
  67. </script> 
  68. </head> 
  69.   
  70. <body> 
  71.   
  72.     <div class="container chat-signin"> 
  73.         <form class="form-signin"> 
  74.             <h2 class="form-signin-heading">Chat sign in</h2> 
  75.             <label for="nickname">Nickname</label> <input type="text" 
  76.                 class="input-block-level" placeholder="Nickname" id="nickname"> 
  77.             <div class="btn-group"> 
  78.                 <label for="chatroom">Chatroom</label> <select size="1" 
  79.                     id="chatroom"> 
  80.                     <option>arduino</option> 
  81.                     <option>java</option> 
  82.                     <option>groovy</option> 
  83.                     <option>scala</option> 
  84.                 </select> 
  85.             </div> 
  86.             <button class="btn btn-large btn-primary" type="submit" 
  87.                 id="enterRoom">Sign in</button> 
  88.         </form> 
  89.     </div> 
  90.     <!-- /container --> 
  91.   
  92.     <div class="container chat-wrapper"> 
  93.         <form id="do-chat"> 
  94.             <h2 class="alert alert-success"></h2> 
  95.             <table id="response" class="table table-bordered"></table> 
  96.             <fieldset> 
  97.                 <legend>Enter your message..</legend> 
  98.                 <div class="controls"> 
  99.                     <input type="text" class="input-block-level" placeholder="Your message..." id="message" style="height:60px"/> 
  100.                     <input type="submit" class="btn btn-large btn-block btn-primary" 
  101.                         value="Send message" /> 
  102.                     <button class="btn btn-large btn-block" type="button" id="leave-room">Leave 
  103.                         room</button> 
  104.                 </div> 
  105.             </fieldset> 
  106.         </form> 
  107.     </div> 
  108. </body> 
  109. </html> 

在上面的代码中，要注意如下几点：

在Javascript端要调用websocket的话，要用如下的方式发起连接即可：ws://IP:PORT/CONTEXT_PATH/ENDPOINT_URL e.g ws://0.0.0.0:8080/hascode/chat/java

创建一个Websocket连接的方法很简单，使用的是var wsocket = new WebSocket(‘ws://0.0.0.0:8080/hascode/chat/java’);

要获得来自服务端返回的信息，只需要在回调函数wsocket.onmessage中设置对应的获取返回信息的方法即可。

发送一个Websocket消息到服务端，使用的方法是wsocket.send()，其中可以发送的消息可以文本或者二进制数据。

关闭连接使用的是wsocket.close()。

Websocket中还有其他很多种用法，具体的可以参考其标准规范文档http://tools.ietf.org/html/rfc6455）

最后，我们通过

mvn package embedded-glassfish:run

进行代码的部署，然后就可以看到本文开始部分截图的效果。

本文的代码可以通过git获得：

git clone https://bitbucket.org/hascode/javaee7-websocket-chat.git

读者也可以通过这个地址下载可部署的war包：


共3页: 上一页123下一页

相关文章

相关栏目：

相关文章

用户点评