HTML5 WebSocket的使用及例子

心已赠人 2022-08-09 03:09 177阅读 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 协议中，为我们实现即使服务带来了两大好处：

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. 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 οnlοad="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>

http://blog.csdn.net/huangwuyi/article/details/12912283