WebSocket

来源：互联网发布：mac文件导入移动硬盘编辑：程序博客网时间：2024/04/28 22:23

一、认识HTML5的WebSocket

在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名为Socket.IO。

二、什么是WebSocket API?

WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。

三、WebSocket API的用法

只专注于客户端的API，因为每个服务器端语言有自己的API。下面的代码片段是打开一个连接，为连接创建事件监听器，断开连接，消息时间，发送消息返回到服务器，关闭连接。

[Copy to clipboard] [ - ]

CODE:

[javascript] view plain copy
// 创建一个Socket实例  
var socket = new WebSocket('ws://localhost:8080');   
  
// 打开Socket   
socket.onopen = function(event) {   
  
  // 发送一个初始化消息  
  socket.send('I am the client and I\'m listening!');   
  
  // 监听消息  
  socket.onmessage = function(event) {   
    console.log('Client received a message',event);   
  };   
  
  // 监听Socket的关闭  
  socket.onclose = function(event) {   
    console.log('Client notified socket has closed',event);   
  };   
  
  // 关闭Socket....   
  //socket.close()   
};  

让我们来看看上面的初始化片段。参数为URL，ws表示WebSocket协议。onopen、onclose和onmessage方法把事件连接到Socket实例上。每个方法都提供了一个事件，以表示Socket的状态。

onmessage事件提供了一个data属性，它可以包含消息的Body部分。消息的Body部分必须是一个字符串，可以进行序列化/反序列化操作，以便传递更多的数据。

WebSocket的语法非常简单，使用WebSockets是难以置信的容易……除非客户端不支持WebSocket。IE浏览器目前不支持WebSocket通信。如果你的客户端不支持WebSocket通信，下面有几个后备方案供你使用：

Flash技术 ——Flash可以提供一个简单的替换。使用Flash最明显的缺点是并非所有客户端都安装了Flash，而且某些客户端，如iPhone/iPad，不支持Flash。

AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是一个可行的技术，但它不能优化发送的信息。也就是说，它是一个解决方案，但不是最佳的技术方案。

由于目前的IE等浏览器不支持WebSocket，要提供WebSocket的事件处理、返回传输、在服务器端使用一个统一的API，那么该怎么办呢？幸运的是，GuillermoRauch创建了一个Socket.IO技术。

四、环境要求

浏览器

实现了websocket的浏览器：

Chrome

Supported in version 4+

Firefox

Supported in version 4+

Internet Explorer

Supported in version 10+

Opera

Supported in version 10+

Safari

Supported in version 5+

服务器

在服务器端,也出现了一些实现websocket协议的项目:

jetty 7.0.1包含了一个初步的实现

resin 包含有websocket 实现

pywebsocket, apache http server 扩展

apache tomcat 7.0.27 版本

Nginx 1.3.13 版本

jWebSocket java实现版

websocket api在浏览器端的广泛实现似乎只是一个时间问题了,值得注意的是服务器端没有标准的api, 各个实现都有自己的一套api,并且jcp也没有类似的提案,所以使用websocket开发服务器端有一定的风险.可能会被锁定在某个平台上或者将来被迫升级.

样例

一、前端页面

[html] view plain copy
<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>My JSP'index.jsp' starting page</title>  
    <style type="text/css">  
    .infos{  
        list-style-type: none;  
    }  
    .infos li{  
        border: 1pxsolid #EEE;  
        margin: 2px;  
        font-size: 12px;  
        line-height: 25px;  
        height: 25px;  
    }  
    
    .red{  
        color: red;  
    }  
    .green{  
        color: green;  
    }  
    .blue{  
        color: blue;  
    }  
    </style>  
    <script type="text/javascript" src="jquery1.9.0.js"></script>  
    <script type="text/javascript">  
    var webSocket= null;  
    var flag = true;//全局标记位，标记浏览器是否支持websocket  
    $(function(){  
        if(!window.WebSocket){  
            $("body").append("<h1>你的浏览器不支持WebSocket</h1>");  
            flag = false;  
            return;  
        }  
         
    });  
     
    functionstartConnect(){  
        if(flag == false){  
            return;  
        }  
        var url = "ws://localhost:8080/websocketDemo/websocket";  
        webSocket = newWebSocket(url);  
         
        webSocket.onerror = function(event) {  
            onError(event)  
        };  
        webSocket.onopen = function(event) {  
            onOpen(event)  
        };  
        webSocket.onmessage = function(event) {  
            onMessage(event)  
        };  
         
        //webSocket.send("客户端给服务端发送消息：hello,start");  
         
    }  
    functiononMessage(event) {  
        $(".infos").append("<liclassliclass='blue'>" + event.data + "</li>");  
    }  
    functiononOpen(event) {  
        $(".infos").append("<liclassliclass='green'>已连接至服务器</li>");  
        $("#startBtn").prop("disabled" , true);  
        $("#sendMessageBtn").prop("disabled" , false);  
    }  
    functiononError(event) {  
        $(".infos").append("<liclassliclass='red'>连接服务器发生错误</li>");  
    }  
    function sendMessage(){  
        var msg = "[" + $("#username").val() + "]：" + $("#message_input_id").val();//获取发送信息  
        webSocket.send(msg);//向服务器发送消息  
        //不需要将此信息追加到列表，由后台统一将消息发送给所有  
        //$(".infos").append("<liclassliclass='green'>" + msg + "</li>");//将消息添加至本地列表  
        $("#message_input_id").val("");//清空消息  
    }  
    </script>  
  </head>  
   
  <body>  
     
    <ul class="infos">  
        <li class="red">提示：点击开始连接将连接到服务器</li>  
    </ul>  
    <br/><br/>  
    <input type="button" value="开始连接" id="startBtn"onclick="startConnect()"/><br/><br/>  
    输入名称：<input id="username" value="<%=(int)(Math.random() *1000) %>" style="width: 50px;margin-right:5px;" />  
    <input id="message_input_id" />  
    <input type="button" value="发送消息" id="sendMessageBtn"disabled="disabled" onclick="sendMessage()" />  
     
  </body>  
</html>  

[java] view plain copy
package com.websocket;  
   
import java.io.IOException;  
import java.util.Queue;  
import java.util.Set;  
import java.util.concurrent.ConcurrentLinkedQueue;  
import javax.websocket.OnClose;  
import javax.websocket.OnMessage;  
import javax.websocket.OnOpen;  
import javax.websocket.Session;  
import javax.websocket.server.ServerEndpoint;  
@ServerEndpoint("/websocket")  
public class WebSocketTest {  
    /** 
     * 存储当前有效的session对象 
     */  
    private staticQueue<Session> sessionSet = new ConcurrentLinkedQueue<Session>();  
     
    @OnMessage  
    public voidonMessage(String message, Session currentSession) {  
       System.out.println("Server say：Received:" + message);  
        try {  
            finalSet<Session> sessions = currentSession.getOpenSessions();//获得又少条连接信息  
           System.out.println("检测到连接服务器是对象数量是"+ sessions.size());  
            //客户端互相发送消息  
            for (Sessionsession : sessions) {  
                session.getBasicRemote().sendText(message);  
            }  
            //  
             sendmessage();  
             sendmessage();  
            /************启动定时公告**************/  
          //  SystemTimer.getInstance();  
//            Test.Test();  
            /**************************/  
        } catch(IOException e) {  
           e.printStackTrace();  
        }  
    }  
    private voidsendmessage() {  
          for (Session session :sessionSet) {  
                    try {  
                           session.getBasicRemote().sendText("李斌：[大家辛苦了，现在时间是["+ "asdasdasd" + "]，我是李斌]");  
                    } catch(IOException e) {  
                           e.printStackTrace();  
                    }  
             }  
              
      }  
      @OnOpen  
    public voidonOpen(Session currentSession) {  
       if(sessionSet.contains(currentSession) == false){  
           sessionSet.add(currentSession);  
           System.out.println("WebSocketTest.onOpen()================Add="+ sessionSet.size());  
        }  
       System.out.println("Server say：Clientconnected");  
    }  
    @OnClose  
    public voidonClose(Session currentSession) {  
        if(sessionSet.contains(currentSession)){  
           sessionSet.remove(currentSession);  
        }  
       System.out.println("Server say：Connectionclosed============Close=" + sessionSet.size());  
    }  
    public staticQueue<Session> getSessionSet() {  
        return sessionSet;  
    }  
     
}  

二、后台服务(针对tomcat7.0.55以上版本)，

0 0

WebSocket

一、 认识HTML5的WebSocket

四、环境要求

浏览器

服务器

一、认识HTML5的WebSocket