spring boot socket短连接 spring boot web socket

转载

mob64ca14144dde 2023-10-20 12:09:26

文章标签 java spring boot websocket 客户端服务端 文章分类 spring boot 后端开发

SpringBoot中的WebSocket搭建详解通俗易懂

SpringBoot中已经集成了websocket，搭建起来很简单，容易上手，废话少说，开始。

一、基础搭建

导入依赖 （首先需要一个SpringBoot的环境，此文章不再赘述）

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        
        //以下两个依赖用在前端搭建的时候用到
		 <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>

导入依赖后第一步完成。

二、基本的WebSocket配置

接下来进行一个WebSocket配置
需要创建一个配置类WebSocketConfig，定义全局的配置信息，使用JavaConfig的形式

package com.example.websocket.config;

import com.example.websocket.intecepter.HttpHandShakeIntecepter;
import com.example.websocket.intecepter.SocketChannelIntecepter;
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.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;


@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{

	/**
	 * 注册端点，发布或者订阅消息的时候需要连接此端点
	 * setAllowedOrigins 非必须，*表示允许其他域进行连接
	 * withSockJS  表示开始sockejs支持
	 *
	 * 这个方法的作用是添加一个服务端点，来接收客户端的连接。
	 */
	public void registerStompEndpoints(StompEndpointRegistry registry) {

		//表示添加了一个 /endpoint-websocket 端点，客户端就可以通过这个端点来进行连接。
		registry.addEndpoint("/endpoint-websocket").addInterceptors(new HttpHandShakeIntecepter())
		.setAllowedOrigins("*").withSockJS();
		//withSockJS()的作用是开启SockJS支持，
	}

	/**
	 * 配置消息代理(中介)
	 * enableSimpleBroker 服务端推送给客户端的路径前缀
	 * setApplicationDestinationPrefixes  客户端发送数据给服务器端的一个前缀
	 *
	 * 这个方法的作用是定义消息代理，通俗一点讲就是设置消息连接请求的各种规范信息。
	 */
	@Override
	public void configureMessageBroker(MessageBrokerRegistry registry) {

		//表示客户端订阅地址的前缀信息，也就是客户端接收服务端消息的地址的前缀信息
		registry.enableSimpleBroker("/topic"); //接收
		//指服务端接收地址的前缀，意思就是说客户端给服务端发消息的地址的前缀
		registry.setApplicationDestinationPrefixes("/app");  //发送

		//上面两个方法定义的信息其实是相反的，一个定义了客户端接收的地址前缀，一个定义了客户端发送地址的前缀

	}

	@Override
	public void configureClientInboundChannel(ChannelRegistration registration) {
		registration.interceptors( new SocketChannelIntecepter());
	}

	@Override
	public void configureClientOutboundChannel(ChannelRegistration registration) {
		registration.interceptors( new SocketChannelIntecepter());
	}
}

在上述的配置文件中
registerStompEndpoints 方法详解

registerStompEndpoints
//这个方法的作用是添加一个服务端点，来接收客户端的连接。
可以通俗的理解为这就像一个屋子（服务端点），而里面配置就是标明屋子的门牌号
registry.addEndpoint("/endpoint-websocket")
// 这里表示添加了一个/endpoint-websocket 的端点，客户端可以通过这个端点来进行连接
可以通俗的理解为这是上述所说的门牌号
.addInterceptors(new HttpHandShakeIntecepter())
//这个是添加的一个自定义拦截器（基本配置里可以不加）
.setAllowedOrigins("*")
//经查阅官方文档springwebsocket 4.1.5版本前默认支持跨域访问，之后的版本默认不支持跨域，需要设置
.withSockJS();
//withSockJS()的作用是开启SockJS支持

configureMessageBroker 方法详解

configureMessageBroker
//这个方法的作用是定义消息代理，通俗一点讲就是设置消息连接请求的各种规范信息
registry.enableSimpleBroker("/topic"); //接收 topic可自定义
//表示客户端订阅地址的前缀信息，也就是客户端接收服务端消息的地址的前缀信息
registry.setApplicationDestinationPrefixes("/app"); //发送 app可自定义
//指服务端接收地址的前缀，意思就是说客户端给服务端发消息的地址的前缀

上面两个方法定义的信息其实是相反的，一个定义了客户端接收的地址前缀，一个定义了客户端发送地址的前缀。
比较绕，可以看下我下面举的例子。
一个客户端当作一个人，进入了屋子（服务端点）之后，有接收信息和发送信息的能力，但是房子里的人多了起，你一句我一句会让信息错乱，为了要统一规范，发送和接收前都要加上一个标识，也正是上面所定义的“topic”，“app”。

三、前后端编写

上述的基本配置完成后，就可以编写基本的功能了

package com.example.websocket.controller.v3;

import com.example.websocket.model.InMessage;
import com.example.websocket.model.OutMessage;
import com.example.websocket.service.WebSocketService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;



@Controller
public class V3ChatRoomContoller {

	
	/**
	* 这是 调用convertAndSendToUser来推送消息
	*/
	@Autowired
	private SimpMessagingTemplate template;

	/**
	 * @MessageMapping
	 * @param message
	 */
	@MessageMapping("/v3/single/chat")
	public void singleChat(InMessage message) {

		//意思就是“将给定的对象进行序列化，使用‘MessageConverter’进行包装转化成一条消息，发送到指定的目标”，通俗点讲就是我们使用这个方法进行消息的转发发送！
		template.convertAndSend("/topic/single/"+message.getTo(),
				new OutMessage(message.getFrom()+" 发送:"+ message.getContent()));

	}
}

内容详解

SimpMessagingTemplate
这是调用convertAndSendToUser来推送消息，Spring-WebSocket内置的一个消息发送工具，可以将消息发送到指定的客户端
@MessageMapping
//Spring提供的一个注解，功能类似@RequestMapping，存在于Controller中的，定义一个消息的基本请求，支持通配符``的url等
详情用法见Web on Servlet Stack

此后台的基础搭建完成，开始前端部分。

WebSocket前端准备工作

前端需要准备两个js文件：
sockjs.js和stomp.js

<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>

SockJS：
SockJS 是一个浏览器上运行的 JavaScript 库，如果浏览器不支持 WebSocket，该库可以模拟对 WebSocket 的支持，实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。
Stomp
Stomp 提供了客户端和代理之间进行广泛消息传输的框架。Stomp 是一个非常简单而且易用的通讯协议实现，尽管代理端的编写可能非常复杂，但是编写一个 Stomp 客户端却是很简单的事情，另外你可以使用 Telnet 来与你的 Stomp 代理进行交互。

HTML代码：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/v3/app.js"></script>
</head>
<style>
    body {
        background-color: #f5f5f5;
    }

    #main-content {
        max-width: 940px;
        padding: 2em 3em;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
</style>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div id="main-content" class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">建立连接通道:</label>
                    <button id="connect" class="btn btn-default" type="submit">连接</button>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">断开连接</button>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <input type="text" id="from" class="form-control" placeholder="我是">
                    <input type="text" id="to" class="form-control" placeholder="发送给谁">

                    <input type="text" id="content" class="form-control" placeholder="请输入...">


                </div>
                <button id="send" class="btn btn-default" type="submit">发送</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>记录</th>
                </tr>
                </thead>
                <tbody id="notice">
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

JS代码：

var stompClient = null;

function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#notice").html("");
}

function connect() {
	var from = $("#from").val();
	//找到配置好的服务端点（屋子），建立连接
	var socket = new SockJS('/endpoint-websocket');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/single/'+from, function (result) {
            //这个subscribe()方法功能就是定义一个订阅地，址用来接收服务端的信息（在服务端代码中，我们在V3ChatRoomContoller中指定了这个订阅地址“/topic/single”），当收到消息后，在回调函数中处理业务逻辑。
        	showContent(JSON.parse(result.body));
        });
    });
}

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

function sendName() {

    stompClient.send("/app/v3/single/chat", {}, JSON.stringify({'content': $("#content").val(), 'to':$("#to").val(), 'from':$("#from").val()}));


}

function showContent(body) {
    //给记录 添加一条聊天记录
    $("#notice").append("<tr><td>" + body.content + "</td> <td>"+new Date(body.time).toLocaleString()+"</td></tr>");
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});

开启Socket（建立通道）

1.var socket = new SockJS('/endpoint-websocket');    //建立一个SocketJS对象
	2 stompClient = Stomp.over(socket);   //用Stomp将SocketJS进行协议封装
	3.stompClient.connect();   //与服务端进行连接，同时有一个回调函数，处理连接成功后的操作信息。

发送消息

stompClient.send("/app/v3/single/chat", {}, value);
stompClient.send("/app/v3/single/chat", {}, JSON.stringify({'content': $("#content").val(), 'to':$("#to").val(), 'from':$("#from").val()}));
这里的value 封装了一个json将数据拼接后发送，后台进行解析并进行业务处理

演示效果

spring boot socket短连接 spring boot web socket_spring boot

spring boot socket短连接 spring boot web socket_java_02

客户端小小和大大准备进行连接
连接成功后打印对应的sessionId，业务处理时，sessionId用于唯一标识

spring boot socket短连接 spring boot web socket_客户端_03

连接后进行消息发送，此时可以看到大大这边可以接收到消息。

spring boot socket短连接 spring boot web socket_websocket_04

spring boot socket短连接 spring boot web socket_客户端_05

此时后台打印的日志

spring boot socket短连接 spring boot web socket_服务端_06

可以看到消息体的相关内容都捕获到，可以进行后续的业务处理。

至此，WebSocket基础开发完毕

下面是对应后台的拦截器，监听器等。

拦截器：

package com.example.websocket.intecepter;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;
import javax.servlet.http.HttpSession;
import java.util.Map;

/**
 * 功能描述：http握手拦截器，可以通过这个类的方法获取resuest,和response
 */
public class HttpHandShakeIntecepter implements HandshakeInterceptor{

	@Override
	public boolean beforeHandshake(ServerHttpRequest request,
                                   ServerHttpResponse response, WebSocketHandler wsHandler,
                                   Map<String, Object> attributes) throws Exception {

		System.out.println("【握手拦截器】beforeHandshake");
		
		
		if(request instanceof ServletServerHttpRequest) {
			ServletServerHttpRequest servletRequest = (ServletServerHttpRequest)request;
			HttpSession session =  servletRequest.getServletRequest().getSession();
			String sessionId = session.getId();
			System.out.println("【握手拦截器】beforeHandshake sessionId="+sessionId);
			attributes.put("sessionId", sessionId);
		}
		
		return true;
	}

	
	@Override
	public void afterHandshake(ServerHttpRequest request,
                               ServerHttpResponse response, WebSocketHandler wsHandler,
                               Exception exception) {
		System.out.println("【握手拦截器】afterHandshake");
		
		if(request instanceof ServletServerHttpRequest) {
			ServletServerHttpRequest servletRequest = (ServletServerHttpRequest)request;
			HttpSession session =  servletRequest.getServletRequest().getSession();
			String sessionId = session.getId();
			System.out.println("【握手拦截器】afterHandshake sessionId="+sessionId);
		}
		
		
		
	}

}

package com.example.websocket.intecepter;
import com.alibaba.fastjson.JSONObject;
import com.example.websocket.Utils.Millisecond;
import com.example.websocket.controller.v6.UserChatController;
import com.example.websocket.model.InMessage;
import com.fasterxml.jackson.core.type.TypeReference;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.Message;
import org.springframework.messaging.MessageChannel;
import org.springframework.messaging.simp.stomp.StompCommand;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.messaging.support.ChannelInterceptorAdapter;
import java.util.Map;
/**
 * 功能描述：频道拦截器 ，类似管道，可以获取消息的一些meta数据
 */
@Slf4j
public class SocketChannelIntecepter extends ChannelInterceptorAdapter{

	/**
	 * 在完成发送之后进行调用，不管是否有异常发生，一般用于资源清理
	 */
	@Override
	public void afterSendCompletion(Message<?> message, MessageChannel channel,
			boolean sent, Exception ex) {
		System.out.println("SocketChannelIntecepter->afterSendCompletion");
		super.afterSendCompletion(message, channel, sent, ex);
	}

	/**
	 * 在消息被实际发送到频道之前调用
	 */
	@Override
	public Message<?> preSend(Message<?> message, MessageChannel channel) {
		System.out.println("SocketChannelIntecepter->preSend");

		return super.preSend(message, channel);
	}

	/**
	 * 发送消息调用后立即调用
	 */
	@Override
	public void postSend(Message<?> message, MessageChannel channel,
			boolean sent) {
		System.out.println("SocketChannelIntecepter->postSend");
		String s = new String((byte[]) message.getPayload());
		//InMessage inMessage = JSONObject.parseObject(s, new TypeReference<InMessage>(){});
		//System.out.println(inMessage);
		System.out.println(s);
		StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(message);//消息头访问器
		if (headerAccessor.getCommand() == null ) {
			return ;// 避免非stomp消息类型，例如心跳检测
		}
		Map<String, Object> sessionAttributes = headerAccessor.getSessionAttributes();
		System.out.println(sessionAttributes);
		String sessionId = headerAccessor.getSessionAttributes().get("sessionId").toString();
		System.out.println("SocketChannelIntecepter -> sessionId = "+sessionId);
		StompCommand command = headerAccessor.getCommand();
		System.out.println(headerAccessor.getCommand());
		switch (headerAccessor.getCommand()) {
		case CONNECT:
			connect(sessionId);
			break;
		case DISCONNECT:
			disconnect(sessionId);
			break;
		case SUBSCRIBE:
			break;
		case UNSUBSCRIBE:
			break;
		default:
			break;
		}
	}
	long btime = 0;
	long etime = 0;
	//连接成功
	private void connect(String sessionId){
		System.out.println("连接成功 sessionId="+sessionId);
		System.out.println("connect sessionId="+sessionId);
		btime = System.currentTimeMillis();
		System.out.println(System.currentTimeMillis());
	}
	//断开连接
	private void disconnect(String sessionId){
		System.out.println("断开连接 sessionId="+sessionId);
		System.out.println("disconnect sessionId="+sessionId);
		//用户下线操作
		UserChatController.onlineUser.remove(sessionId);
		etime = System.currentTimeMillis();
		long difference = Millisecond.getDifference(btime, etime, 0);
		System.out.println("通讯时间--------->"+difference+"秒");
	}
}

监听器：

package com.example.websocket.listener;

import org.springframework.context.ApplicationListener;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.messaging.SessionConnectEvent;

@Component
public class ConnectEventListener implements ApplicationListener<SessionConnectEvent> {

	public void onApplicationEvent(SessionConnectEvent event) {
		StompHeaderAccessor headerAccessor =  StompHeaderAccessor.wrap(event.getMessage());
		System.out.println("【ConnectEventListener监听器事件 类型】"+headerAccessor.getCommand().getMessageType());
		
		
	}

}

package com.example.websocket.listener;

import org.springframework.context.ApplicationListener;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.messaging.SessionSubscribeEvent;


/**
 * 功能描述：springboot使用，订阅事件
 */
@Component
public class SubscribeEventListener implements ApplicationListener<SessionSubscribeEvent> {

	/**
	 * 在事件触发的时候调用这个方法
	 * 
	 * StompHeaderAccessor  简单消息传递协议中处理消息头的基类，
	 * 通过这个类，可以获取消息类型(例如:发布订阅，建立连接断开连接)，会话id等
	 * 
	 */
	public void onApplicationEvent(SessionSubscribeEvent event) {
		StompHeaderAccessor headerAccessor =  StompHeaderAccessor.wrap(event.getMessage());
		System.out.println("【SubscribeEventListener监听器事件 类型】"+headerAccessor.getCommand().getMessageType());
		System.out.println("【SubscribeEventListener监听器事件 sessionId】"+headerAccessor.getSessionAttributes().get("sessionId"));
		
	}

}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。