spring websocket实现前后端通信

项目要用websocket实现一个前后端实时通信的功能，做完之后感触颇多，写个博客回顾下整个历程，也希望能给后面的同志有点帮助。

百度网盘示例源码：链接：https://pan.baidu.com/s/1Gi3qRyLO-lTnkVn4MqGIJA 密码：4ovr

我使用springmvc的websocket组件，官网地址：点击打开链接

示例内容：用户登陆之后往设置session设置登陆名，之后跳转到发送消息页面，加载页面时创建websocket连接，这时，springmvc拦截器拦截到websocket请求，把session中登陆名保存到attributes中，这个值会映射到WebSocketSession里，从而在SpringWebSocketHandler类中使用，这部分看不懂没关联，结合下面的代码来看就懂了。

步骤一：添加maven依赖，注意两点问题

1、spring的websocket依赖容器支持，我选用的是tomcat7.077，tomcat7以下是不支持websocket的

2、javax-servlet-api和java-websocket-api两个包都限定了<scope>provided</scope>因为这两个包tomcat容器已经带了，provided表示编译时使用，打包不会包含在war包里，如不知道重启启动会报错。

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.1.0</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>4.1.5.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<dependency>
			<groupId>taglibs</groupId>
			<artifactId>standard</artifactId>
			<version>1.1.2</version>
		</dependency>
		
		<!-- spring websocket -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-messaging</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-websocket</artifactId>
			<version>4.1.7.RELEASE</version>
		</dependency>
				<dependency>
		    <groupId>javax.websocket</groupId>
		    <artifactId>javax.websocket-api</artifactId>
		    <version>1.0</version>
		    <scope>provided</scope>
		</dependency>

步骤二：编辑SpringWebSocketConfig，根据spring文档，编写websocketConfig，这里可参看文档，xml配置和使用注解两种方式，我选择注解方式

registerWebSocketHandlers：这个方法是向spring容器注册一个handler地址，我把他理解成requestMapping

addInterceptors：拦截器，当建立websocket连接的时候，我们可以通过继承spring的HttpSessionHandshakeInterceptor来搞事情。

setAllowedOrigins：跨域设置，*表示所有域名都可以，不限制，域包括ip：port, 指定*可以是任意的域名，不加的话默认localhost+本服务端口

withSockJS：这个是应对浏览器不支持websocket协议的时候降级为轮询的处理。

@Configuration
@EnableWebSocket
public class SpringWebSocketConfig implements WebSocketConfigurer {
    
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(webSocketHandler(),"/websocket/socketServer")
                .addInterceptors(new SpringWebSocketHandlerInterceptor()).setAllowedOrigins("*");
        
        registry.addHandler(webSocketHandler(), "/sockjs/socketServer").setAllowedOrigins("http://localhost:28180")
               .addInterceptors(new SpringWebSocketHandlerInterceptor()).withSockJS();
    }

    @Bean
    public TextWebSocketHandler webSocketHandler(){
 
        return new SpringWebSocketHandler();
    }

}

步骤三：编写SpringWebSocketHandlerInterceptor

这个是创建websocket连接是的拦截器，记录建立连接的用户的session以便根据不同session来通信

public class SpringWebSocketHandlerInterceptor extends HttpSessionHandshakeInterceptor {
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
                                   Map<String, Object> attributes) throws Exception {
        System.out.println("Before Handshake");
        if (request instanceof ServletServerHttpRequest) {
            ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
            HttpSession session = servletRequest.getServletRequest().getSession(false);
            if (session != null) {
                //使用userName区分WebSocketHandler，以便定向发送消息
                String userName = (String) session.getAttribute("SESSION_USERNAME");  //一般直接保存user实体
                if (userName!=null) {
                    attributes.put("WEBSOCKET_USERID",userName);
                }

            }
        }
        return super.beforeHandshake(request, response, wsHandler, attributes);

    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
                               Exception ex) {
        super.afterHandshake(request, response, wsHandler, ex);
    }

}

步骤四：编写SpringWebSocketHandler

public class SpringWebSocketHandler extends TextWebSocketHandler {
    
 
    private static final Map<String, WebSocketSession> users;  //Map来存储WebSocketSession，key用USER_ID 即在线用户列表
 
    //用户标识
    private static final String USER_ID = "WEBSOCKET_USERID";   //对应监听器从的key
 
 
    static {
        users =  new HashMap<String, WebSocketSession>();
    }
 
    public SpringWebSocketHandler() {}
 
    /**
     * 连接成功时候，会触发页面上onopen方法
     */
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
 
        System.out.println("成功建立websocket连接!");
        String userId = (String) session.getAttributes().get(USER_ID);
        users.put(userId,session);
        System.out.println("当前线上用户数量:"+users.size());
 
        //这块会实现自己业务，比如，当用户登录后，会把离线消息推送给用户
        //TextMessage returnMessage = new TextMessage("成功建立socket连接，你将收到的离线");
        //session.sendMessage(returnMessage);
    }
 
    /**
     * 关闭连接时触发
     */
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        String userId= (String) session.getAttributes().get(USER_ID);
        System.out.println("用户"+userId+"已退出！");
        users.remove(userId);
        System.out.println("剩余在线用户"+users.size());
    }
 
    /**
     * js调用websocket.send时候，会调用该方法
     */
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
 
        super.handleTextMessage(session, message);
 
        /**
         * 收到消息，自定义处理机制，实现业务
         */
        System.out.println("服务器收到消息："+message);
 
        if(message.getPayload().startsWith("#anyone#")){ //单发某人
 
             sendMessageToUser((String)session.getAttributes().get(USER_ID), new TextMessage("服务器单发：" +message.getPayload())) ;
 
        }else if(message.getPayload().startsWith("#everyone#")){
 
             sendMessageToUsers(new TextMessage("服务器群发：" +message.getPayload()));
 
        }else{
 
        }
 
    }
 
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        if(session.isOpen()){
            session.close();
        }
        System.out.println("传输出现异常，关闭websocket连接... ");
        String userId= (String) session.getAttributes().get(USER_ID);
        users.remove(userId);
    }
 
    public boolean supportsPartialMessages() {
 
        return false;
    }
 
 
    /**
     * 给某个用户发送消息
     *
     * @param userId
     * @param message
     */
    public void sendMessageToUser(String userId, TextMessage message) {
        for (String id : users.keySet()) {
            if (id.equals(userId)) {
                try {
                    if (users.get(id).isOpen()) {
                        users.get(id).sendMessage(message);
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                }
                break;
            }
        }
    }
 
    /**
     * 给所有在线用户发送消息
     *
     * @param message
     */
    public void sendMessageToUsers(TextMessage message) {
        for (String userId : users.keySet()) {
            try {
                if (users.get(userId).isOpen()) {
                    users.get(userId).sendMessage(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

}

步骤五：配置文件扫描config类我的SpringWebSocketConfig配置在包com.thunisoft.config下

	<context:component-scan base-package="com.thunisoft.ssm.controller,com.thunisoft.config"></context:component-scan>

步骤六：编写springmvc controller

@Controller
public class WebSocketController {
 
    @Bean//这个注解会从Spring容器拿出Bean
    public SpringWebSocketHandler infoHandler() {
 
        return new SpringWebSocketHandler();
    }
 
 
    @RequestMapping("/websocket/loginPage")
    public String loginPage(HttpServletRequest request, HttpServletResponse response) throws Exception {
        return "/order/login";
    }
 
 
    @RequestMapping("/websocket/login")
    public String login(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String username = request.getParameter("username");
        System.out.println(username+"登录");
        HttpSession session = request.getSession(false);
        session.setAttribute("SESSION_USERNAME", username); //一般直接保存user实体
        return "/order/send";
    }
 
    @RequestMapping("/websocket/send")
    @ResponseBody
    public String send(HttpServletRequest request) {
        String username = request.getParameter("username");
        infoHandler().sendMessageToUser(username, new TextMessage("你好，测试！！！！"));
        return null;
    }
 
 
    @RequestMapping("/websocket/broad")
    @ResponseBody
    public  String broad() {
        infoHandler().sendMessageToUsers(new TextMessage("发送一条小Broad"));
        System.out.println("群发成功");
        return "broad";
    }
 
}

步骤七：编辑登陆jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>测试spring websocket</title>
</head>
<body>

<form action="${ctx}/websocket/login">
    登录名：<input type="text" name="username"/>
    <input type="submit" value="登录聊天室"/>
</form>
</body>

步骤八：编写通信页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <!--
	<link rel="stylesheet" href="/css/style.css"/>
    -->
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>
    <script type="text/javascript">
        var websocket = null;
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/springfirst/websocket/socketServer");
        }
        else if ('MozWebSocket' in window) {
            websocket = new MozWebSocket("ws://localhost:8080/springfirst/websocket/socketServer");
        }
        else {
            websocket = new SockJS("http://localhost:8080/springfirst/sockjs/socketServer");
        }
        websocket.onopen = onOpen;
        websocket.onmessage = onMessage;
        websocket.onerror = onError;
        websocket.onclose = onClose;
 
        function onOpen(openEvt) {
            alert(openEvt.Data);
        }
 
        function onMessage(evt) {
            alert("super is:" + evt.data);
        }
        function onOpen() {
        }
        function onError() {}
        function onClose() {}
 
        function doSendUser() {
        	
        alert(websocket.readyState + ":" + websocket.OPEN);
            if (websocket.readyState == websocket.OPEN) {
                var msg = document.getElementById("inputMsg").value;
                websocket.send("#anyone#"+msg);//调用后台handleTextMessage方法
                alert("发送成功!");
            } else {
                alert("连接失败!");
            }
        }
 
 
        function doSendUsers() {
            if (websocket.readyState == websocket.OPEN) {
                var msg = document.getElementById("inputMsg").value;
                websocket.send("#everyone#"+msg);//调用后台handleTextMessage方法
                alert("发送成功!");
            } else {
                alert("连接失败!");
            }
        }
 
 
        window.close=function()
        {
            websocket.onclose();
        }
        function websocketClose() {
        	websocket.close();
        }
    </script>
 
</head>
<body>
 
请输入：<textarea rows="5" cols="10" id="inputMsg" name="inputMsg"></textarea>
<button οnclick="doSendUser();">发送</button>
<button οnclick="doSendUsers();">群发</button>
<button οnclick="websocketClose();">关闭连接</button>
</body>
</html>

演示效果图

登陆：

单发：

群发：

后续配合nginx发布，在nginx代理的情况下需要配置,这个示例项目，我的跟目录是/springfirst ,springfirst是我的项目名，实际项目发布的时候是隐藏项目名的，所以配置/就可以。

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

	upstream websocket {
		server 127.0.0.1:8080;
	}


    server {
        listen       80;
		server_name  max.eqshow.cnn;


        #charset koi8-r;


        #access_log  logs/host.access.log  main;
		location /springfirst {
		  proxy_pass http://websocket;
		  proxy_set_header   Host             $host;
                  proxy_set_header   X-Real-IP        $remote_addr;
                  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
		  proxy_http_version 1.1;
		  proxy_set_header Upgrade $http_upgrade;
                  proxy_set_header Connection "upgrade";
        }
	}

总结：做完之后感觉整个过程并不复杂，单其实经历了好几天，从最初的不知道什么是websocket，到后来不知道nginx配置出问题，从不知道到知道，其实遇到了很多问题。比如，不知道websocket需要容器和浏览器的支持，不知道跨域需要设置setAllowedOrigins("*"),demo写好怎么融入到项目中也遇到了很多问题。但这一切在有结果的时候都豁然开朗。同时也了解了器用分析法，先了解基本用法，写个demo,然后研究其原理。到目前为止也是浅薄的是了解而已，后面遇到问题在继续更新吧。

本文示例参考：https://blog.csdn.net/zmx729618/article/details/78584633

springmvc websocket:点击打开链接

http://www.runoob.com:点击打开链接

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/runbat/article/details/80985944
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-21 23:09:13
阅读 ( 1101 )
分类：

spring websocket实现前后端通信

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看