初识WebSocket

　　之前学习的web端的通信都走的时http协议，都是一次请求一次响应的模式。本文来学习一下webSocket长连接。

　　传统的web请求和响应模式中，我们在浏览器中通过http仅仅能实现单向的通信，comet可以一定程度上模拟双向通信，但是效率较低，并且需要服务器有较好的支持；flash中的socket和xmlsocket可以实现真正的双向通信，通过flex ajax bridge，可以在浏览器中得到实现，将会替代上面两项技术，得到广泛的使用，面对这种情况，HTML5定义了websocket协议，能更好的节省服务器资源和带宽并达到实时通讯。

　　webSocket目标：打破传统的web请求响应模型，实时管道式的实时通信。打开浏览器和服务器的通信管道，持续连接！服务器给浏览器推送数据，非常方便。

 

一、ServerApplicationconfig接口

　　项目启动时会自动启动，类似与ContextListener时webSocket的核心配置类。

　　他有两个方法：

　　　　1. getEndPointConfigs获取所有以接口方式配置的webSocket类。

　　　　2. getAnnotatedEndpointClasses扫描src下所有类@ServerEndPoint注解类。（EndPoint就指的是一个webSocket的一个服务端程序）

 

二、第一个demo

　　将tomat的 lib下的2个关联jar包拿到项目下面。

 

public class DemoConfig implements ServerApplicationConfig{

    //注解方式 启动
    public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scaned) {
        // TODO Auto-generated method stub
        System.out.println("启动。。。。。。。。。。。。。。。。。。。。。。");
        return null;
    }

    //接口方式的启动
    public Set<ServerEndpointConfig> getEndpointConfigs(
            Set<Class<? extends Endpoint>> arg0) {
        // TODO Auto-generated method stub
        return null;
    }

}

　　上面类继承了ServerApplicationConfig接口，而我们要使用注解，所以只关心getAnnotatedEndpointClasses方法即可。

　　而我们创建的连接类只需要加上@ServerEndpoint(value = "")注解，并配上访问路径即可。

@ServerEndpoint(value = "/echo")
public class EchoSocket {

}

 

三、实现一个WebSocket应用程序，我们要学会几个基本操作

　　1. 开启连接

　　客户端代码：

        var ws;//一个ws对象就是一个管道
        var target = "ws://localhost:8080/webSocket_01/echo";
        function subOpen(){
            if("WebSocket" in window){
                ws = new WebSocket(target);
            } else if ("MozWebSocket" in window){
                ws = new MozWebSocket(target);
            } else {
                alert("WebSocket is not supported by this browser");
            }
        }

 

　　服务端在EchoSocket类中只要加入@onOpen方法即可

/**
     * 一个session代表一个通信会话，一个sessionid代表一个会话
     * @param session
     */
    @OnOpen
    public void open(Session session) {
        //不同的用户会产生不同的sessionid
        System.out.println("id"+session.getId());
    }

 

　　2.客户端给服务器发送数据

　　ws是全局变量，可以直接使用。

　　　　/**
        * 客户端发送消息
        */
        function subSend(){
            var msg = $("msg").value;
            ws.send(msg);
        }

　　3. 服务端接收数据

    /**
     * 服务端获取消息
     * @param session
     */
    @OnMessage
    public void message(Session session, String msg, boolean last) {
        
    }

 

　　4.服务端给客户端发送数据

    //服务器返回消息
        try {
            session.getBasicRemote().sendText("");
        } catch (IOException e) {
            e.printStackTrace();
        }

　　5.客户端接受数据

            //在subOpen方法中绑定方法
            ws.onmessage = function (event){
                console.log(data);
            }            

 

　　6. 关闭连接

　　　　当浏览器关闭时只要在方法上加入@OnClose即可

//当浏览器关闭时执行
    @OnClose
    public void close() {
        
    }

　　监听三类基本事件：onopen（打开连接时的响应事件），onmessage（发送数据时响应事件），onclose（关闭连接时的响应事件）