Springboot+WebSocket实现一对一聊天和公告的示例代码

 更新时间:2021年04月26日 11:09:38   作者:一个头发茂密的程序员  
这篇文章主要介绍了Springboot+WebSocket实现一对一聊天和公告的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1.POM文件导入Springboot整合websocket的依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.1.6.RELEASE</version>
        </dependency>

2.注册WebSocket的Bean交给Spring容器管理

@Configuration
public class WebSocketServiceConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3.WebSocket服务端实现

@ServerEndpoint 注解声明为一个WebSocket服务,访问地址为/chat/{username},@Component将其注册为Spring的一个组件,交给Spring进行管理

@ServerEndpoint("/chat/{username}")
@Component
@Slf4j
public class WebSocket {
    //注入dao或者service,注意:因为dao层接口和service层都是单例的Bean
    //webSocket 不是单例的,所以在注入dao或者service时,需要用set方法对其进行注入,保证每一个都是独立的
     private static ChatMapper chatMapper;
      //参数中的ChatMapper  是 单例池中的ChatMapper 
    @Autowired
    public void setChatMapper(ChatMapper chatMapperBean){
        WebSocket.chatMapper = chatMapperBean;
    }

    //当前连接数
    private static int onLinePersonNum;
    //定义为Map结构,key值代表用户名称或其他唯一标识,Value代表对应的WebSocket连接。
    //ConcurrentHashMap 保证线程安全,用来存放每个客户端对应的WebSocket对象
    private static Map<String,WebSocket> webSocketMap = new ConcurrentHashMap<String, WebSocket>();
   //用户名
    private String username;
    //当前httpSession
    private Session session;

    /**
     * 打开链接
     * @param username
     * @param session
     */
    @OnOpen
    public void openConnect(@PathParam("username")String username, Session session){
        this.session = session;
        this.username = username;
        //在线连接数+1
        onlinePerNumAdd();
        //用户名和当前用户WebSocket对象放进Map中
        webSocketMap.put(this.username,this);
        log.info("{}连接服务器成功。。。。",this.username);
    }

    /**
     * 关闭连接
     * @param username
     * @param session
     * @PathParam 用来获取路径中的动态参数Key值 
     */
    @OnClose
    public void closeConnect(@PathParam("username")String username, Session session){
        webSocketMap.remove(username);
        //在线连接数-1
        onlinePerNumSub();
        log.info("{} 断开连接。。。",username);
    }

    /**
     * 错误提示
     */
    @OnError
    public void errorConnect(Session session, Throwable error){
        log.error("websocket连接异常:{}",error.getMessage());
    }

    @OnMessage
    public void send(String message, Session session) throws IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        Map map = objectMapper.readValue(message, Map.class);
        sendMessage(map.get("username").toString(),message);
    }

    /**
     * 点对点发送
     * @param username
     * @param message
     * @throws IOException
     */
    private void sendMessage(String username,String message) throws IOException {
        WebSocket webSocket = webSocketMap.get(username);
        webSocket.session.getBasicRemote().sendText(message);
    }
     /**
     * 广播类型发送
     * @param message
     * @throws IOException
     */
    private void sendMessage(String message) throws IOException {
        Set<String> keys = webSocketMap.keySet();
        for (String key : keys) {
            WebSocket webSocket = webSocketMap.get(key);
            webSocket.sendMessage(message);
        }
    }

    private synchronized static void onlinePerNumAdd(){
        WebSocket.onLinePersonNum ++;
    }
    private synchronized static void onlinePerNumSub(){
        WebSocket.onLinePersonNum --;
    }
    private synchronized static int getOnLinePerNum(){
        return WebSocket.onLinePersonNum;
    }
}

4.webSocket客户端

chat1.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <!--    <script src="https://heerey525.github.io/layui-v2.4.3/layui/layui.js"></script>-->
   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<!--<button id="user1" onclick="connect()">连接</button>-->
<input id="link" type="text"/>

<input id="sendMsg" type="text"/>
<button onclick="send()">发送</button>

<div id="message">

</div>
</body>

<script type="text/javascript">
   var websocket = null;
   // function connect() {
   //判断当前浏览器是否支持WebSocket  ,主要此处要更换为自己的地址
   if('WebSocket' in window){
       websocket = new WebSocket("ws://localhost:8089/chat/bbb");
   }
   else{
       alert('Not support websocket')
   }
   //连接发生错误的回调方法
   websocket.onerror = function(){
       // setMessageInnerHTML("error");
   };

   //连接成功建立的回调方法
   websocket.onopen = function(event){
       console.log("连接成功!!!")
       // setMessageInnerHTML("open");
       $("#link").val("连接成功!!")
   }

   //连接关闭的回调方法
   websocket.onclose = function(){
       // setMessageInnerHTML("close");
   }

   //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
   window.onbeforeunload = function(){
       websocket.close();
   }
   //发送消息
   function send(){
       websocket.send("aaa");
       // onmessage();
   }

   //接收到消息的回调方法
   // function onmessage(){
   websocket.onmessage = function(event){
       console.log(event.data)
       // setMessageInnerHTML(event.data);
       $("#message").append("<h1>"+ event.data + "</h1>")
       // }
   }
</script>
</html>

chat2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://heerey525.github.io/layui-v2.4.3/layui/layui.js"></script>-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<!--<button id="user1" onclick="connect()">连接</button>-->
<input id="link" type="text"/>

<input id="sendMsg" type="text"/>
<button onclick="send()">发送</button>

<div id="message">

</div>
</body>

<script type="text/javascript">
    var websocket = null;
    // function connect() {
        //判断当前浏览器是否支持WebSocket  ,主要此处要更换为自己的地址
        if('WebSocket' in window){
            websocket = new WebSocket("ws://localhost:8089/pushMsg/aaa");
        }
        else{
            alert('Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function(){
            // setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function(event){
            console.log("连接成功!!!")
            // setMessageInnerHTML("open");
            $("#link").val("服务器连接成功!!")
        }

        //连接关闭的回调方法
        websocket.onclose = function(){
            // setMessageInnerHTML("close");
        }

        //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
        window.onbeforeunload = function(){
            websocket.close();
        }
    //发送消息
    function send(){
        websocket.send("bbb");
        // onmessage();
    }

    //接收到消息的回调方法
    // function onmessage(){
        websocket.onmessage = function(event){
            console.log(event.data)
            // setMessageInnerHTML(event.data);
            $("#message").append("<h1>"+ event.data + "</h1>")
        // }
    }

</script>
</html>

以上就是具体的代码实现,对于如果用户离线,websocket断开连接的情况,可以采用持久化的存储方式。例如使用mysql关系型数据库或Redis缓存等等保存用户的读取状态,当用户登录后查询用户是否有未读消息,然后进行推送。

到此这篇关于Springboot+WebSocket实现一对一聊天和公告的示例代码的文章就介绍到这了,更多相关Springboot WebSocket一对一聊天内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Java中的while无限循环结构及实例

    Java中的while无限循环结构及实例

    这篇文章主要介绍了Java中的while无限循环结构及实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 详解Elasticsearch如何实现简单的脚本排序

    详解Elasticsearch如何实现简单的脚本排序

    Elasticsearch 是位于 Elastic Stack 核心的分布式搜索和分析引擎,可以为所有类型的数据提供近乎实时的搜索和分析。本文主要介绍了Elasticsearch如何实现简单的脚本排序,感兴趣的可以了解一下
    2023-01-01
  • 解析Java中如何获取Spring中配置的bean

    解析Java中如何获取Spring中配置的bean

    本篇文章是对在Java中如何获取Spring中配置的bean进行了详细的分析介绍,需要的朋友参考下
    2013-07-07
  • SpringBoot参数校验示例详解

    SpringBoot参数校验示例详解

    SpringBoot自带了validation工具可以从后端对前端传来的参数进行校验,本文给大家介绍SpringBoot参数校验及用法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Java字母大小写转换的方法

    Java字母大小写转换的方法

    这篇文章主要为大家详细介绍了Java字母大小写转换的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详解Nacos配置中心的实现

    详解Nacos配置中心的实现

    Spring Cloud Alibaba 是阿里巴巴提供的一站式微服务开发解决方案。而 Nacos 作为 Spring Cloud Alibaba 的核心组件之一,提供了两个非常重要的功能:注册中心和配置中心,我们今天来了解和实现一下二者
    2022-08-08
  • 解决mapper接口无法映射mapper.xml的问题

    解决mapper接口无法映射mapper.xml的问题

    这篇文章主要介绍了解决mapper接口无法映射mapper.xml的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 深入理解java1.8之supplier

    深入理解java1.8之supplier

    这篇文章主要介绍了深入理解java1.8之supplier,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Java合并两个List后并去掉重复项的两种做法

    Java合并两个List后并去掉重复项的两种做法

    工作中很多时候需要用到合并两个List并去除其中的重复内容,这是一个很简单的操作,实现的方法也多种多样,这篇文章主要给大家介绍了关于Java合并两个List后并去掉重复项的两种做法,需要的朋友可以参考下
    2023-10-10
  • Java给实体每一个字段赋默认值详细代码示例

    Java给实体每一个字段赋默认值详细代码示例

    这篇文章主要给大家介绍了关于Java给实体每一个字段赋默认值的相关资料,在编程过程中有时会出现这样一种情况,在查询无结果时我们需要给实体赋默认值,需要的朋友可以参考下
    2023-09-09

最新评论