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一对一聊天内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • SpringBoot+WebSocket搭建简单的多人聊天系统

    前言 今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么 首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工通信的协议.这是一种比较官方的说法,简单点来说就是,在一次TCP连接中,通信的双方可以相互通信.比如A和B在打电话,A说话的时候,B也可以说话来进行信息的交互,这就叫做全双工通信.对应的是单工通信,和半双工通信,单工通信就是只能由A向B通信,比如电脑和打印机.半双工通信是可以AB可以互相通信,但是同一时间只

  • Springboot基于websocket实现简单在线聊天功能

    添加maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM

  • SpringBoot+Websocket实现一个简单的网页聊天功能代码

    最近做了一个SpringBoot的项目,被SpringBoot那简介的配置所迷住.刚好项目中,用到了websocket.于是,我就想着,做一个SpringBoot+websocket简单的网页聊天Demo. 效果展示: 当然,项目很简单,没什么代码,一眼就能明白 导入websocket的包. 通过使用SpringBoot导入包的时候,我们可以发现,很多包都是以 spring-boot-starter 开头的,对于我这种强迫症 ,简直是福音 <dependency> <groupId>

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

  • SpringBoot+WebSocket+Netty实现消息推送的示例代码

    上一篇文章讲了Netty的理论基础,这一篇讲一下Netty在项目中的应用场景之一:消息推送功能,可以满足给所有用户推送,也可以满足给指定某一个用户推送消息,创建的是SpringBoot项目,后台服务端使用Netty技术,前端页面使用WebSocket技术. 大概实现思路: 前端使用webSocket与服务端创建连接的时候,将用户ID传给服务端 服务端将用户ID与channel关联起来存储,同时将channel放入到channel组中 如果需要给所有用户发送消息,直接执行channel组的writ

  • Docker 部署 SpringBoot 项目整合 Redis 镜像做访问计数示例代码

    最终效果如下 大概就几个步骤 1.安装 Docker CE 2.运行 Redis 镜像 3.Java 环境准备 4.项目准备 5.编写 Dockerfile 6.发布项目 7.测试服务 环境准备 系统:Ubuntu 17.04 x64 Docker 17.12.0-ce IP:45.32.31.101 一.安装 Docker CE 国内不建议使用:"脚本进行安装",会下载安装很慢,使用步骤 1 安装,看下面的链接:常规安装方式 1.常规安装方式 Ubuntu 17.04 x64 安装

  • SpringBoot中整合Shiro实现权限管理的示例代码

    之前在 SSM 项目中使用过 shiro,发现 shiro 的权限管理做的真不错,但是在 SSM 项目中的配置太繁杂了,于是这次在 SpringBoot 中使用了 shiro,下面一起看看吧 一.简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序. 三个核心组件: 1.Subject 即"当前操作用户".但是,在 Shi

  • SpringBoot应用整合ELK实现日志收集的示例代码

    ELK即Elasticsearch.Logstash.Kibana,组合起来可以搭建线上日志系统,本文主要讲解使用ELK来收集SpringBoot应用产生的日志. ELK中各个服务的作用 Elasticsearch:用于存储收集到的日志信息: Logstash:用于收集日志,SpringBoot应用整合了Logstash以后会把日志发送给Logstash,Logstash再把日志转发给Elasticsearch: Kibana:通过Web端的可视化界面来查看日志. 使用Docker Compos

  • springboot整合Mybatis、JPA、Redis的示例代码

    引言 在springboot 项目中,我们是用ORM 框架来操作数据库变的非常方便.下面我们分别整合mysql ,spring data jpa 以及redis .让我们感受下快车道. 我们首先创建一个springboot 项目,创建好之后,我们来一步步的实践. 使用mybatis 引入依赖: <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-

  • SpringBoot通过自定义注解实现日志打印的示例代码

    前言 在我们日常的开发过程中通过打印详细的日志信息能够帮助我们很好地去发现开发过程中可能出现的Bug,特别是在开发Controller层的接口时,我们一般会打印出Request请求参数和Response响应结果,但是如果这些打印日志的代码相对而言还是比较重复的,那么我们可以通过什么样的方式来简化日志打印的代码呢? SpringBoot 通过自定义注解实现权限检查可参考我的博客:SpringBoot 通过自定义注解实现权限检查 正文 Spring AOP Spring AOP 即面向切面,是对OO

  • SpringBoot实现API接口多版本支持的示例代码

    一.简介 产品迭代过程中,同一个接口可能同时存在多个版本,不同版本的接口URL.参数相同,可能就是内部逻辑不同.尤其是在同一接口需要同时支持旧版本和新版本的情况下,比如APP发布新版本了,有的用户可能不选择升级,这是后接口的版本管理就十分必要了,根据APP的版本就可以提供不同版本的接口. 二.代码实现 本文的代码实现基于SpringBoot 2.3.4-release 1.定义注解 ApiVersion @Target({ElementType.TYPE, ElementType.METHOD}

  • SpringBoot+Mybatis-Plus实现mysql读写分离方案的示例代码

    1. 引入mybatis-plus相关包,pom.xml文件 2. 配置文件application.property增加多库配置 mysql 数据源配置 spring.datasource.primary.jdbc-url=jdbc:mysql://xx.xx.xx.xx:3306/portal?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=

  • SpringBoot实现阿里云快递物流查询的示例代码

    一.前言 本文将基于springboot2.4.0实现快递物流查询,物流信息的获取通过阿里云第三方实现 可参考: https://market.aliyun.com/products/57124001/cmapi022273.html?spm=5176.730005.productlist.d_cmapi022273.e8357d36FVX3Eu&innerSource=search#sku=yuncode1627300000 快递查询API,快递识别单号,快递接口可查询上百家快递公司及物流快递

随机推荐