websocket

1、基础概念说明

STOMP，Streaming Text Orientated Message Protocol，是流文本定向消息协议，是一种为MOM(Message Oriented Middleware，面向消息的中间件)设计的简单文本协议。

2、websocket实现方式

1）、tomcat的websocket

案例：在apache-tomcat-8.0.24\webapps\examples\websocket目录下存在多个websocket案例

向客户端推送消息：

    public static void broadcast(String msg) {
        for (ChatAnnotation client : connections) {
            try {
                synchronized (client) {
                    client.session.getBasicRemote().sendText(msg);
                }
            } catch (IOException e) {
                log.debug("Chat Error: Failed to send message to client", e);
                connections.remove(client);
                try {
                    client.session.close();
                } catch (IOException e1) {
                    // Ignore
                }
                String message = String.format("* %s %s",
                        client.nickname, "has been disconnected.");
                broadcast(message);
            }
        }
    }

调用方法是类方法调用

2）、spring的websocket

服务器端代码解释

1、controller

@Controller
public class GreetingController {

    //指定该方法处理指定路径的消息
    @MessageMapping("/hello")
    //发送消息到指定的客户端路径
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + message.getName() + "!");
    }
}

2、配置

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        //指定代理处理路径为topic的客户端消息
        config.enableSimpleBroker("/topic");
        //在客户端消息的路径上加上前缀app
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //websocket的一开始的握手交互需要借助HTTP请求完成
        //该处的作用是注册名字为"gs-guide-websocket"的websocket终端，启用sockJS后备选项，

	//sockJS将尝试联系gs-guide-websocket，并使用最佳交互方法（websocket, xhr-streaming, xhr-polling等方法）
        registry.addEndpoint("/gs-guide-websocket").withSockJS();
    }

}

3、前端js

var stompClient = null;

//设置按钮的连接状态
function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
	//新建一个socket并连接gs-guide-websocket服务端口
    var socket = new SockJS('/creepers/gs-guide-websocket');
    //使用stomp协议进行交互封装
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
    	//设置按钮的连接状态
        setConnected(true);
        //在控制台打印链接状态
        console.log('Connected: ' + frame);
        //开启客户端的端口服务,并指定收到信息所执行的动作
        stompClient.subscribe('/topic/greetings', function (greeting) {
            showGreeting(JSON.parse(greeting.body).content);
        });
    });
}

//断开连接
function disconnect() {
    if (stompClient != null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendName() {
	//指定消息需要发送到的服务器的服务端口
    stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
}

function showGreeting(message) {
    $("#greetings").append("<tr><td>" + message + "</td></tr>");
}

//绑定函数到指定的组件
$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});