HTML5 WebSocket的使用及例子

最新推荐文章于 2024-09-16 08:15:00 发布

日霄科技

最新推荐文章于 2024-09-16 08:15:00 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_27016363/article/details/83379801

版权

Java 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

Socket

4 篇文章 0 订阅

订阅专栏

WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。
现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。
在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：

Header
互相沟通的Header是很小的-大概只有 2 Bytes
Server Push
服务器可以主动传送数据给客户端

下面实现一个简单PUSH例子如下：
服务端代码：

  public class InitServlet extends HttpServlet {


/**
* 
*/
private static final long serialVersionUID = 1L;
private static List<MessageInbound> socketList;


public void init(ServletConfig config) throws ServletException {
InitServlet.socketList = new ArrayList<MessageInbound>();
super.init(config);
System.out.println("Server start============");
}


public static List<MessageInbound> getSocketList() {
return InitServlet.socketList;
}


}

  

  public class TestWebSocketServlet extends WebSocketServlet{


private static final Logger log = Logger.getLogger(TestWebSocketServlet.class);
/**
* 
*/
private static final long serialVersionUID = 1L;
//存储链接的容器
private  static  List<WebSocketMessageInbound> connsList = new ArrayList<WebSocketMessageInbound>();
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {
// TODO Auto-generated method stub
return new WebSocketMessageInbound();
}
public class WebSocketMessageInbound extends MessageInbound{


@Override  
   protected void onClose(int status) {  
//        InitServlet.getSocketList().remove(this);  
super.onClose(status);  
log.debug("onClose");
InitServlet.getSocketList().remove(this);
   }  

   @Override  
   protected void onOpen(WsOutbound outbound) {  
    log.debug("onOpen");
       super.onOpen(outbound);  
       InitServlet.getSocketList().add(this);
   }  
@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
// TODO Auto-generated method stub
log.debug("onBinaryMessage");
}


@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// TODO Auto-generated method stub
log.debug("onTextMessage="+message);
// this.getWsOutbound().writeTextMessage(CharBuffer.wrap("===="));
// this.getWsOutbound().writeTextMessage(message);
//发送给所有链接的
for (MessageInbound messageInbound : InitServlet.getSocketList()) {  
           CharBuffer buffer = CharBuffer.wrap(message);  
           WsOutbound outbound = messageInbound.getWsOutbound();  
           outbound.writeTextMessage(buffer);  
           outbound.flush();  
       }  
}

}
}

web.xml配置

<servlet>
<servlet-name>initServlet</servlet-name>
<servlet-class>com.demo.websocket.InitServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>websocket</servlet-name>
<servlet-class>com.demo.websocket.TestWebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>websocket</servlet-name>
<url-pattern>/websocket</url-pattern>
</servlet-mapping>

前台代码：

  <html> 
     <head> 
         <title>WebSoket Demo</title> 
         <script type="text/javascript"> 
             //验证浏览器是否支持WebSocket协议
             if (!window.WebSocket) { 
                 alert("WebSocket not supported by this browser!"); 
             } 
              var ws;
             function display() { 
                 //var valueLabel = document.getElementById("valueLabel"); 
                 //valueLabel.innerHTML = ""; 
                 ws=new WebSocket("ws://localhost:8082/SpringMVC/websocket"); 
                 //监听消息
                 ws.onmessage = function(event) { 
                     //valueLabel.innerHTML+ = event.data; 
                     log(event.data);
                 }; 
                 // 打开WebSocket 
                 ws.onclose = function(event) { 
                   //WebSocket Status:: Socket Closed
                 }; 
                 // 打开WebSocket
                 ws.onopen = function(event) { 
                    //WebSocket Status:: Socket Open
                      发送一个初始化消息
                     ws.send("Hello, Server!"); 
                 }; 
                 ws.onerror =function(event){
                     //WebSocket Status:: Error was reported
                 };
             } 
             var log = function(s) {  
   if (document.readyState !== "complete") {  
       log.buffer.push(s);  
   } else {  
       document.getElementById("contentId").innerHTML += (s + "\n");  
   }  
}  
             function sendMsg(){
                 var msg=document.getElementById("messageId");
                 //alert(msg.value);
                 ws.send(msg.value); 
             }
         </script> 
     </head> 
     <body onload="display();"> 
         <div id="valueLabel"></div> 
         <textarea rows="20" cols="30" id="contentId"></textarea>
         <br/>
         <input name="message" id="messageId"/>
         <button id="sendButton" onClick="javascript:sendMsg()" >Send</button>
     </body> 
</html>

备注：必须把TOMCAT7 lib目录下的两个jar文件catalina.jar、tomcat-coyote.jar添加到项目的lib。