基于websocket-stomp的web-server通讯

基于websocket-stomp的web-server通讯

新手学习记录

多个平台都发一哈，怕一个被夹了就莫得了
想实现网页端和服务器端的实时双工通信，采用了websocket-stomp。感觉自己还很不扎实，问题很多。
暂且记录，有空再好好处理。

目前配置如下：

核心部分

1.服务器端采用广播模式，稍微改改就可以实现用户传播：

//简单的连接控制
@Controller
@Service
public class StompController {
        //用于计数
	private int i = 0;
	private int j = 0;
	@Autowired
	private SimpMessagingTemplate trafficFlow;
	@Autowired
	private SimpMessagingTemplate peopelFlow;
	//定义了一个服务端接口
	@MessageMapping("/connect")
	@SendTo("/system/msg")
	public void connect(@Payload String name) throws InterruptedException {
		System.out.println("Broadcasting"+"  "+name);
                //当获得客户端发送请求时响应
		if(name.equals("iamready")) {
                        //此处进行业务处理
			Random ra = new Random();
			int k = ra.nextInt(100);
			Map<String,Object> msg = new HashMap<String, Object>();
                        //可以不要
			Thread.sleep(1000);
                        //通过SimpMessagingTemplate主动发送消息，而不是利用return，更加灵活
			msg.put(String.valueOf(i), String.valueOf(k));
			trafficFlow.convertAndSend("/system/msg",msg);
			i++;
		}
                //代表客户端不再需要信息了，这里可以处理更好
		if(name.equals("iamfinished")) {
				System.out.println("It is finished");
				i = 0;
			}
	}
        //其他业务省略
        //......
}

2.客户端javaScript部分如下，要实现加载页面之后自行连接服务器：

//连接服务器
socket = new SockJS('/stomp');
stompClient = Stomp.over(socket);
var data;
//加载页面就发送请求
set(get);

//关闭页面就断开连接
window.onbeforeunload = onbeforeunload_handler;
window.onunload = onunload_handler;
function onbeforeunload_handler() {
	sendGoodBye();
	//disconnect();
}

//利用setTimeOut解决异步问题
function set(get){
    stompClient.connect({},function (frame){
    console.log("服务器连接"+frame);
    setTimeout(2000);
    get();
    });	
};

function get(){
    setTimeout(function(){
    stompClient.subscribe('/system/msg', function(mes){
        dataLog = JSON.parse(mes.body);
        console.log(dataLog);
        var temp = Object.keys(dataLog)[0]
        arr.push(dataLog[temp]);
        yarr.push(Object.keys(dataLog)[0]);
        refreshData(arr);//自定义刷新的时候调用
        stompClient.send("/app/connect",{},"iamready");
    })
    },1000)

setTimeout(function(){stompClient.send("/app/connect",{},"iamready")},1000);
};


//获取并刷新数据
function refreshData(data,ydata){
     //刷新图表数据
     option = myChart.getOption();
     option.series[0].data = data;
     option.xAxis.data = ydata;
     myChart.setOption(option);    
}
		
//向服务器发送完成信号
function sendGoodBye(){
    stompClient.send("/app/connect",{},"iamfinished");
}
function disconnect(){
    stompClient.disconnect();
}

还有很多地方要改进阿- -
网络连接的安全性问题。
SimpMessagingTemplate类太简单了
客户端用setTimeOut太暴力了，最好是利用事件监听机制进行处理，更加稳健。
目前客户端逻辑还有点混乱，还得改改- -
对于stomp其他机制了解也不够多（英文看得脑溢血)。
总之临时学习还是不太靠谱，有空要认真学。

网络配置如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.ChannelRegistration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;



@Configuration
@EnableWebSocketMessageBroker
//用于实时流 Stomp or websocket的定义，目前暂用stomp
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{
	//地址
	public static final String BROKER_SYSTEM_MSG = "/system/msg";
	public static final String BROKER_OTHER = "/system";
	public static final String BROKER_PEOPLE = "/system/peopleFlow";
		@Override
	public void configureMessageBroker(MessageBrokerRegistry config) {
			//用于指定客户端可以订阅哪些地址
			config.enableSimpleBroker(BROKER_SYSTEM_MSG,BROKER_PEOPLE);
			//客户端发送消息的服务端地址前缀
			config.setApplicationDestinationPrefixes("/app");
			//服务端发给 制定 客户端的前缀 /system/msg 是广播 /user/system/msg则是制定客户端
			config.setUserDestinationPrefix("/user");
		}
	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry) {
		//SockJS 用于定义连接节点
		registry.addEndpoint("/stomp")//.setHandshakeHandler(new CustomHandler())
			//.setAllowedOrigins("*")
			.withSockJS();		
	}
	//配置线程数量（pool），防止错顺序
	@Override
    public void configureClientOutboundChannel(ChannelRegistration registration) {
        registration.taskExecutor().corePoolSize(1).maxPoolSize(1);
    }	
}

部分pom.xml如下：

                <dependency>
 			<groupId>org.webjars</groupId>
  			<artifactId>sockjs-client</artifactId>
  			<version>1.0.2</version>
		</dependency>
		<dependency>
 	 		<groupId>org.webjars</groupId>
  			<artifactId>stomp-websocket</artifactId>
  			<version>2.3.3</version>
		</dependency>
		<dependency>
  			<groupId>org.webjars</groupId>
  			<artifactId>bootstrap</artifactId>
  			<version>3.3.7</version>
		</dependency>
		<dependency>
  			<groupId>org.webjars</groupId>
  			<artifactId>jquery</artifactId>
  			<version>3.1.1-1</version>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			</dependency>
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-core</artifactId>
			</dependency>
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-annotations</artifactId>
			</dependency>

初学者，希望各位大佬不吝赐教！