SSM整合WebSocket实现即时通讯（聊天）

最新推荐文章于 2023-08-31 14:37:58 发布

orzdh

最新推荐文章于 2023-08-31 14:37:58 发布

阅读量3.3k

点赞数 2

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/jiulanyangyang/article/details/109849178

版权

JavaWeb 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、先进行SSM框架的整合，这里不多描述。可以见我另外一篇文章IDEA创建一个maven的ssm项目整合

看下最终效果图
在这里插入图片描述

2、导入WebSocket需要的依赖（这里通过maven）

 <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-websocket</artifactId>
      <version>4.0.2.RELEASE</version>
    </dependency>

<!--建议添加9.0.38版本，添加只添加8.5.23的话，项目启动时会报错-->
   <dependency>
      <groupId>org.apache.tomcat.embed</groupId>
      <artifactId>tomcat-embed-websocket</artifactId>
      <version>9.0.38</version>
    </dependency>

     <!--只添加8.5.23的话，项目启动时会报错-->
    <dependency>
      <groupId>org.apache.tomcat.embed</groupId>
      <artifactId>tomcat-embed-websocket</artifactId>
      <version>8.5.23</version>
    </dependency>

3、先看一下整体目录结构
在这里插入图片描述
4、先创建WebsocketDemo，内容如下：

package cn.orz.web.webSocket;

import java.io.IOException;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.socket.server.standard.SpringConfigurator;


@ServerEndpoint(value="/websocketDemo/{userId}",configurator = SpringConfigurator.class)
public class WebsocketDemo {

private Logger logger = LoggerFactory.getLogger(WebsocketDemo.class);
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //记录每个用户下多个终端的连接
    private static Map<Long, Set<WebsocketDemo>> userSocket = new HashMap<>();

    //需要session来对用户发送数据, 获取连接特征userId
    private Session session;
    private Long userId;

    /**
     * @Title: onOpen
     * @Description: websocekt连接建立时的操作
     * @param @param userId 用户id
     * @param @param session websocket连接的session属性
     * @param @throws IOException
     */
    @OnOpen
    public void onOpen(@PathParam("userId") Long userId,Session session) throws IOException {
        this.session = session;
        this.userId = userId;
        onlineCount++;
        //根据该用户当前是否已经在别的终端登录进行添加操作
        if (userSocket.containsKey(this.userId)) {
            logger.debug("当前用户id:{}已有其他终端登录",this.userId);
            userSocket.get(this.userId).add(this); //增加该用户set中的连接实例
        }else {
            logger.debug("当前用户id:{}第一个终端登录",this.userId);
            Set<WebsocketDemo> addUserSet = new HashSet<>();
            addUserSet.add(this);
            userSocket.put(this.userId, addUserSet);
        }
        logger.debug("用户{}登录的终端个数是为{}",userId,userSocket.get(this.userId).size());
        logger.debug("当前在线用户数为：{},所有终端个数为：{}",userSocket.size(),onlineCount);
    }

    /**
     * @Title: onClose
     * @Description: 连接关闭的操作
     */
    @OnClose
    public void onClose(){
        //移除当前用户终端登录的websocket信息,如果该用户的所有终端都下线了，则删除该用户的记录
        if (userSocket.get(this.userId).size() == 0) {
            userSocket.remove(this.userId);
        }else{
            userSocket.get(this.userId).remove(this);
        }
        logger.debug("用户{}登录的终端个数是为{}",this.userId,userSocket.get(this.userId).size());
        logger.debug("当前在线用户数为：{},所有终端个数为：{}",userSocket.size(),onlineCount);
    }

    /**
     * @Title: onMessage
     * @Description: 收到消息后的操作
     * @param @param message 收到的消息
     * @param @param session 该连接的session属性
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        logger.debug("收到来自用户id为：{}的消息：{}",this.userId,message);
        if(session ==null)  logger.debug("session null");
    }

    /**
     * @Title: onError
     * @Description: 连接发生错误时候的操作
     * @param @param session 该连接的session
     * @param @param error 发生的错误
     */
    @OnError
    public void onError(Session session, Throwable error){
        logger.debug("用户id为：{}的连接发送错误",this.userId);
        error.printStackTrace();
    }

    /**
     * @Title: sendMessageToUser
     * @Description: 发送消息给用户下的所有终端
     * @param @param userId 用户id
     * @param @param message 发送的消息
     * @param @return 发送成功返回true，反则返回false
     */
    public Boolean sendMessageToUser(Long userId,String message){
        if (userSocket.containsKey(userId)) {
            
            logger.debug(" 给用户id为：{}的所有终端发送消息：{}",userId,message);
            for (WebsocketDemo WS : userSocket.get(userId)) {
               logger.debug("sessionId为:{}",WS.session.getId());
                try {
                    WS.session.getBasicRemote().sendText(message);
                } catch (IOException e) {
                    e.printStackTrace();
                    return false;
                }
            }
            return true;
        }

        logger.debug("发送错误：当前连接不包含id为：{}的用户",userId);
        return false;
    }

}

5、创建WSMessageService类

package cn.orz.service;

/**
 * @Class: WebSocketMessageService
 * @Description:  使用webscoket连接向用户发送信息
 * @author JFPZ
 * @date 2017年5月15日 上午20:17:01
 */
import cn.orz.web.webSocket.WebsocketDemo;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;





@Service("webSocketMessageService")
public class WSMessageService {
    private Logger logger = LoggerFactory.getLogger(WSMessageService.class);
    //声明websocket连接类
    private WebsocketDemo websocketDemo = new WebsocketDemo();

    /**
     * @Title: sendToAllTerminal
     * @Description: 调用websocket类给用户下的所有终端发送消息
     * @param @param userId 用户id
     * @param @param message 消息
     * @param @return 发送成功返回true，否则返回false
     */
    public Boolean sendToAllTerminal(Long userId,String message){
        logger.debug("向用户{}的消息：{}",userId,message);
        if(websocketDemo.sendMessageToUser(userId,message)){
            return true;
        }else{
            return false;
        }
    }
}

6、MessageController类

package cn.orz.controller;

import cn.orz.service.WSMessageService;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("message")
public class MessageController {

    @Autowired
    private WSMessageService wsMessageService;

    private Logger logger = LoggerFactory.getLogger(MessageController.class);

    //请求入口
    @RequestMapping(value="/TestWS",method= RequestMethod.GET)
    @ResponseBody
    public String TestWS(@RequestParam(value="userId") Long userId,
                         @RequestParam(value="message") String message){

      
        logger.warn("收到发送请求，向用户{}的消息：{}",userId,message);
        if(wsMessageService.sendToAllTerminal(userId, message)){
          
            return "success";
        }else{
          
            return "error";
        }
    }
}

7、运行项目（这边注意一点，需要再Tomcat8以上运行，我在Tomcat7运行时会报错）

8、前端页面
用户A：

<html>
<head>
    <title>Title</title>

    <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <title>webSocket-用户66</title>
    <script type="text/javascript">
        $(function() {
            var websocket;
            if('WebSocket' in window) {
                console.log("此浏览器支持websocket");
                websocket = new WebSocket("ws://127.0.0.1:8080/WebChat/websocketDemo/66");
            } else if('MozWebSocket' in window) {
                alert("此浏览器只支持MozWebSocket");
            } else {
                alert("此浏览器只支持SockJS");
            }
            websocket.onopen = function(evnt) {
				
				
                $("#tou").html("链接服务器成功!")
            };
            websocket.onmessage = function(evnt) {
                $("#msg").html($("#msg").html() + "<br/>" + evnt.data);
            };
            websocket.onerror = function(evnt) {};
            websocket.onclose = function(evnt) {
                $("#tou").html("与服务器断开了链接!")
            }

            $('#send').bind('click', function() {
                
				
                send();
            });

            function send() {
                if(websocket != null) {
					
                    var message = "用户A---:"+document.getElementById('message').value;
                   
						$.ajax({
					   url:"http://localhost:8080/WebChat/message/TestWS?userId=66&message="
						+message,
						type:"GET",
						success: function(result){
							
						  }
						
					
					});
					
					
					$.ajax({
					   url:"http://localhost:8080/WebChat/message/TestWS?userId=88&message="
						+message,
						type:"GET",
						success: function(result){
							
					
                           }
						
					
					});

						
						
					
					
                } else {
                    alert('未与服务器链接.');
                }
            }
        });
    </script>
</head>
<body>
<div class="page-header" id="tou">
    webSocket多终端聊天测试
</div>
<div class="well" id="msg"></div>
<div class="col-lg">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="发送信息..." id="message">
        <span class="input-group-btn">
           <button class="btn btn-default" type="button" id="send" >发送</button>
        </span>
    </div>
</div>
</body>
</html>

用户B：

<html>
<head>
    <title>Title</title>

    <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <title>webSocket-用户66</title>
    <script type="text/javascript">
        $(function() {
            var websocket;
            if('WebSocket' in window) {
                console.log("此浏览器支持websocket");
                websocket = new WebSocket("ws://127.0.0.1:8080/WebChat/websocketDemo/88");
            } else if('MozWebSocket' in window) {
                alert("此浏览器只支持MozWebSocket");
            } else {
                alert("此浏览器只支持SockJS");
            }
            websocket.onopen = function(evnt) {
				
				
                $("#tou").html("链接服务器成功!")
            };
            websocket.onmessage = function(evnt) {
                $("#msg").html($("#msg").html() + "<br/>" + evnt.data);
            };
            websocket.onerror = function(evnt) {};
            websocket.onclose = function(evnt) {
                $("#tou").html("与服务器断开了链接!")
            }

            $('#send').bind('click', function() {
                
				
                send();
            });

            function send() {
                if(websocket != null) {
					
                    var message = "用户B---:"+document.getElementById('message').value;
                   
						$.ajax({
					   url:"http://localhost:8080/WebChat/message/TestWS?userId=88&message="
						+message,
						type:"GET",
						success: function(result){
							
						
                           }
						
					
					});
					
					
					$.ajax({
					   url:"http://localhost:8080/WebChat/message/TestWS?userId=66&message="
						+message,
						type:"GET",
						success: function(result){
							
						
        
                           }
						
					
					});

						
						
					
					
                } else {
                    alert('未与服务器链接.');
                }
            }
        });
    </script>
</head>
<body>
<div class="page-header" id="tou">
    webSocket多终端聊天测试
</div>
<div class="well" id="msg"></div>
<div class="col-lg">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="发送信息..." id="message">
        <span class="input-group-btn">
           <button class="btn btn-default" type="button" id="send" >发送</button>
        </span>
    </div>
</div>
</body>
</html>

本文参考Sring MVC 模式下使用websocket

orzdh

关注

2
点赞
踩
34

收藏

觉得还不错? 一键收藏
3
评论
SSM整合WebSocket实现即时通讯（聊天）

1、先进行SSM框架的整合，这里不多描述。可以见我另外一篇文章IDEA创建一个maven的ssm项目整合看下最终效果图2、导入WebSocket需要的依赖（这里通过maven） <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>4.0.2.
复制链接

扫一扫