SpringBoot通过websocket实现web即时聊天

最新推荐文章于 2024-05-27 15:11:32 发布
最新推荐文章于 2024-05-27 15:11:32 发布
阅读量524 收藏 2
点赞数
分类专栏： WebSocket SpringBoot 文章标签： SpringBoot websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guandongsheng110/article/details/113064842
版权

websocket通常用于即时通讯场景中, 在SpringBoot下也提供了jar支持spring-boot-starter-websocket

pom.xml

<?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/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>websocket</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.3.0.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.3.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
            <version>2.3.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.6</version>
        </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>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.1.1-1</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

启动类

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebsocketApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebsocketApplication.class);
    }

}

配置类

package com.websocket.demo.im.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/wechat").withSockJS();
    }
}

Controller

通过mid和fid来确定一个聊天对象

package com.websocket.demo.im.controller;

import com.websocket.demo.im.dto.Message;
import lombok.extern.slf4j.Slf4j;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Slf4j
@Controller
public class IndexController {

    @GetMapping("/")
    public String index(
            @RequestParam(value = "mid", defaultValue = "GuanDS") String mid,
            @RequestParam(value = "fid", defaultValue = "admin") String fid,
            Model model) {
        model.addAttribute("fid", fid);
        model.addAttribute("mid", mid);
        return "wechat";
    }

    @ResponseBody
    @SendTo("/topic/{mid}_{fid}")
    @MessageMapping("/send/{mid}_{fid}")
    public Object greeting(Message message) {
        log.info("Send msg: {} {}", message.getRecipientId(), message.getContent());
        return message;
    }

}

wechat.ftl

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="/static/css/mui.min.css" rel="stylesheet" />
    <style>
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }
        footer {
            position: fixed;
            width: 100%;
            height: 50px;
            min-height: 50px;
            border-top: solid 1px #bbb;
            left: 0px;
            bottom: 0px;
            overflow: hidden;
            padding: 0px 50px;
            background-color: #fafafa;
        }
        .footer-left {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 0px;
            bottom: 0px;
            text-align: center;
            vertical-align: middle;
            line-height: 100%;
            padding: 12px 4px;
        }
        .footer-right {
            position: absolute;
            width: 50px;
            height: 50px;
            right: 0px;
            bottom: 0px;
            text-align: center;
            vertical-align: middle;
            line-height: 100%;
            padding: 12px 5px;
            display: inline-block;
        }
        .footer-center {
            height: 100%;
            padding: 5px 0px;
        }
        .footer-center [class*=input] {
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }
        .footer-center .input-text {
            background: #fff;
            border: solid 1px #ddd;
            padding: 10px !important;
            font-size: 16px !important;
            line-height: 18px !important;
            font-family: verdana !important;
            overflow: hidden;
        }
        .footer-center .input-sound {
            background-color: #eee;
        }
        .mui-content {
            height: 100%;
            padding: 44px 0px 50px 0px;
            overflow: auto;
            background-color: #eaeaea;
        }
        #msg-list {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
        .msg-item {
            padding: 8px;
            clear: both;
        }
        .msg-item .msg-content {
            display: inline-block;
            border-radius: 5px;
            border: solid 1px #d3d3d3;
            background-color: #FFFFFF;
            color: #333;
            padding: 8px;
            vertical-align: top;
            font-size: 15px;
            position: relative;
            margin: 0px 8px;
            max-width: 75%;
            min-width: 35px;
            float: left;
        }
        .msg-item .msg-content .msg-content-inner {
            overflow-x: hidden;
        }
        .msg-item .msg-content .msg-content-arrow {
            position: absolute;
            border: solid 1px #d3d3d3;
            border-right: none;
            border-top: none;
            background-color: #FFFFFF;
            width: 10px;
            height: 10px;
            left: -5px;
            top: 12px;
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }
        .msg-item-self .msg-user,
        .msg-item-self .msg-content {
            float: right;
        }
        .msg-item-self .msg-content .msg-content-arrow {
            left: auto;
            right: -5px;
            -webkit-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
        }
        .msg-item-self .msg-content,
        .msg-item-self .msg-content .msg-content-arrow {
            background-color: #4CD964;
            color: #fff;
            border-color: #2AC845;
        }
        footer .mui-icon {
            color: #000;
        }
        footer .mui-icon:active {
            color: #007AFF !important;
        }
        #msg-sound {
            -webkit-user-select: none !important;
            user-select: none !important;
        }
        .rprogress {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 140px;
            height: 140px;
            margin-left: -70px;
            margin-top: -70px;
            background-image: url(../images/arecord.png);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 30px 30px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 5px;
            display: none;
            -webkit-transition: .15s;
        }
        .rschedule {
            background-color: rgba(0, 0, 0, 0);
            border: 5px solid rgba(0, 183, 229, 0.9);
            opacity: .9;
            border-left: 5px solid rgba(0, 0, 0, 0);
            border-right: 5px solid rgba(0, 0, 0, 0);
            border-radius: 50px;
            box-shadow: 0 0 15px #2187e7;
            width: 46px;
            height: 46px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -23px;
            margin-top: -23px;
            -webkit-animation: spin 1s infinite linear;
            animation: spin 1s infinite linear;
        }
        .r-sigh{
            display: none;
            border-radius: 50px;
            box-shadow: 0 0 15px #2187e7;
            width: 46px;
            height: 46px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -23px;
            margin-top: -23px;
            text-align: center;
            line-height: 46px;
            font-size: 40px;
            font-weight: bold;
            color: #2187e7;
        }
        .rprogress-sigh{
            background-image: none !important;
        }
        .rprogress-sigh .rschedule{
            display: none !important;
        }
        .rprogress-sigh .r-sigh{
            display: block !important;
        }
        .rsalert {
            font-size: 12px;
            color: #bbb;
            text-align: center;
            position: absolute;
            border-radius: 5px;
            width: 130px;
            margin: 5px 5px;
            padding: 5px;
            left: 0px;
            bottom: 0px;
        }
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        #h {
            background: #fff;
            border: solid 1px #ddd;
            padding: 10px !important;
            font-size: 16px !important;
            font-family: verdana !important;
            line-height: 18px !important;
            overflow: visible;
            position: absolute;
            left: -1000px;
            right: 0px;
            word-break: break-all;
            word-wrap: break-word;
        }
        .cancel {
            background-color: darkred;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">与 ${fid!} 聊天中...</h1>
</header>
<pre id='h'></pre>
<div class="mui-content">
    <div id='msg-list'>
    </div>
</div>
<footer>
    <div class="footer-left">
        <i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
    </div>
    <div class="footer-center">
        <textarea id='msg-text' type="text" class='input-text'></textarea>
    </div>
    <label for="" class="footer-right">
        <i id='msg-send' class="mui-icon mui-icon mui-icon-paperplane"></i>
    </label>
</footer>
<script src="/webjars/jquery/3.1.1-1/jquery.min.js"></script>
<script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
<script type="text/javascript" charset="utf-8">
    var socket = new SockJS('/wechat');
    var stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/${mid!}_${fid!}', function (greeting) {
            $('#msg-list').append(sendContent(false, JSON.parse(greeting.body).content));
        });
    });

    function sendContent(self, content) {
        return "<div class=\"msg-item " + (self ? "msg-item-self" : "") + "\"><i class=\"msg-user mui-icon mui-icon-person\"></i>" +
            "<div class=\"msg-content\"><div class=\"msg-content-inner\">" + content +
            "</div><div class=\"msg-content-arrow\"></div></div></div>";
    }

    $('#msg-send').on('click', function () {
        var msg = $("#msg-text").val();
        if (msg === '') {
            return;
        }
        stompClient.send("/app/send/${fid!}_${mid!}", {}, JSON.stringify({'content': msg}));
        $('#msg-list').append(sendContent(true, msg));
        $("#msg-text").val('');
    })

</script>
</body>
</html>

运行结果

在这里插入图片描述在这里插入图片描述
此时只是简单实现了聊天的功能, 但是没有太完善, 只做参考…

参考源码 https://github.com/spring-guides/gs-messaging-stomp-websocket

跟心爱的人浪迹天涯
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring Boot整合websocket实现群聊，点对点聊天
你好，我们在哪里见过啊！
05-19 4万+
1.websocket：websocket最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。 浏览器和服务器只需要要做一个握手的动作，在建立连接之后，服务器可以主动传送数据给客户端，客户端也可以随时向服务器发送数据。第一、WebSocket是HTML5中的协议，支持持久连接；而Http协议不支持持久连接。第二、首先，Websocket是一个持久化的协议，相对于HTTP这种...
SpringBoot整合websocket实现及时通信聊天
m0_54853420的博客
06-12 1464
线上演示地址：http://chat.breez.work 场景再现：构造函数如下所示： 例子如下： ??1.1.1 函数 1、 webSocket.send() 该函数用于向服务端发送一条消息，例子如下： 2、 webSocket.close() 该函数用于关闭客户端与服务端的连接，例子如下： ??1.1.2　事件 1、webSocket.onopen 该事件用于监听客户端与服务端的连接状态，如果客户端与服务端则该事件触发，例子如下： 2、webSocket.onclose 如果服务端与客户端连接断开，那
SpringBoot+WebSocket实现简单的一对一web聊天
Crazy_young_man的博客
04-26 5040
前言 最近项目中要实现客服系统，其实网上有很多的服务商提供这种接口，但最终决定使用SpringBoot+WebSocket的方式实现。 下面我的项目的结构是使用SpringBoot+Nginx实现的前后端分离的，但是这个不重要，这里只是提出来。 SpringBoot和Nginx我就不在这里多说了，网上有很多教程。过几天我也会专门写几篇文章记录一下。 1. 后台代码 在pom.xml中添加sprin...
SpringBoot 结合 WebSocket 实现聊天功能
最新发布
qq_65142821的博客
05-27 589
WebSocket 是一种网络通信协议，用于在单个 TCP 连接上进行全双工通信。它具有实时性、双向通信、低开销和跨域支持等特点，适用于实时聊天、在线游戏等应用场景。在实际应用中，通常与前端技术结合使用，通过 WebSocket API 来实现实时数据的传输和处理。/**物理程序*/@Component@Slf4j//初始化static {@Override。
SpringBoot整合WebSocket
Cayden666的博客
11-14 2188
SpringBoot整合WebSocket实现简单聊天室 WebSocket协议概述 WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务端主动的向客户端推送消息，使得服务端和客户端之间数据的传输变得简单。对于WebSocket协议的连接，只需要一次握手即可建立连接，并且这种连接是持久的。 简单聊天室实例 客户端代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &
Springboot怎么实现WebSocket通信（一）
凡夫编程
03-07 4516
WebSocket，是HTML5下一种新的协议，支持web浏览器和服务器端之间双向全双工通信 ，基于TCP协议实现。1、WebSocket是一种全新的协议，不属于http无状态协议，协议名为“ws”；2、WebSocket是基于TCP的，属于可靠性传输协议，按OSI网络模型划分，归属应用层协议；3、WebSocket是双向通信协议，可以双向发送或接受信息，与http相比最明显的区别就是允许服务端向客户端浏览器主动推送数据，而HTTP是单向的，只能由客户端发起请求，服务端针对客户端请求作出响应；
SpringBoot WebSocket 实现简单的聊天功能
行走的IT
09-13 8648
前言什么是WebSocketWebSocket为浏览器和服务器之间提供了双工异步通信功能，也就是说我们可以利用浏览器给服务器发送消息，服务器也可以给浏 览器发送消息，目前主流浏览器的主流版本对WebSocket的支持都算是比较好的，但是在实际开发中使用WebSocket工作量会略大， 而且增加了浏览器的兼容问题，这种时候我们更多的是使用WebSocket的一个子协议stomp，利用它来快速实现我
springboot集成websocket实现简单聊天
03-29
总结，通过Spring Boot集成WebSocket，我们可以实现一个简单的聊天应用。关键在于配置WebSocket端点、消息处理以及客户端的JavaScript实现。这个过程中涉及到的主要技术包括Spring Websocket、SockJS和Stomp.js。...
基于Springboot+websocket的web聊天项目（论文+程序设计源码+数据库文件）
06-14
1 绪论 3 1.1 项目开发背景 3 1.2 项目开发意义 3 ...4.2 聊天页面功能实现 14 4.2日志功能模块 17 5 系统测试 17 5.1系统调试的目的和意义 17 5.2功能测试用例 18 6总结 19 参考文献： 19 致 谢 20
Spring boot整合websocket实现即时通讯demo(适合新手或者开发人员学习)
06-27
本项目基于Spring平台，整合websocket协议，实现一个简易web聊天室的功能。主要特性如下: 1.包含聊天室登录、退出的功能。登录时，浏览器自动向服务器发起websocket连接，退出时自动切断。登录页面为...
基于Springboot websocket + js实现的即时聊天系统SpringBoot-web-socket.zip
05-15
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
Springboot+websocket 实现多人聊天室/单人聊天
10-11
这是一个简单使用websocket实现多人聊天室，单人聊天室的demo，里面使用的是最原始的websocket的方法，附有客户端界面可以直接跑起来发送消息看效果。 该项目对应刚刚接触websocket技术是比较有用的。 2019-10-11的个人实测编码运行调试过的demo资源。
springboot+websocket聊天室（多人聊天，单人聊天）
08-30
springboot集成websocket实现聊天室功能（可多人聊天和单独聊天）
基于Springboot websocket + js实现的即时聊天系统.zip
06-28
本资源中的源码都是经过本地编译过可运行的，下载后按照文档配置好环境就可以运行。资源项目的难度比较适中，内容都是经过助教老师审定过的，应该能够满足学习、使用需求，如果有需要的话可以放心下载使用。...
springboot+websocket构建在线聊天室（群聊+单聊）
热门推荐
小牛呼噜噜的博客
09-08 4万+
本系列文章： 1、springboot+websocket构建在线聊天室（群聊+单聊） 2、SpringBoot+STOMP 实现聊天室（单聊+多聊）及群发消息详解 3、websocket stomp+rabbitmq实现消息推送 目录 1、群聊+显示昵称 1.1、原理 1.2、编码分析 1.3、群聊 功能实现 1.3.1、引入依赖 1.3.2、注入ServerEndpoint...
springboot 使用 webSocket 实现多人聊天 + 单人聊天
实习打字猿的博客
04-18 2564
# 后端 WebSocket服务端注解 事件类型 事件描述 @OnOpen onOpen 当打开连接后触发 @OnMessage onMessage 当接收客户端信息时触发 @OnClose onClose 当连接关闭时触发 @OnError onError 当通信异常时触发 # pom.xml <!-- spring Websocket --> ...
SpringBoot+WebSocket+Vue+PeerJs实现WebRTC视频通话功能，Vue视频通话，web视频通话，webrtc视频通话
daiyi666的博客
09-07 1万+
SpringBoot+WebSocket+Vue+PeerJs实现WebRTC视频通话功能 视频通话，Java，Spring Boot，WebRTC，PeerJs VUE视频通话 VUE3视频通话 Js视频通话 JavaScript视频通话 Web视频通话 网页视频通话 WebRTC视频通话 WebSocket+WebRTC视频通话 SpringBoot+WebSocket+Vue+PeerJs实现WebRTC视频通话功能
175. Spring Boot WebSocket：单聊
悟纤学院
12-23 2万+
【视频&交流平台】 à SpringBoot视频 http://study.163.com/course/introduction.htm?courseId=1004329008 à SpringCloud视频 http://study.163.com/course/introduction.htm?courseId=1004638001 à Spring Boot源码 https:/
springboot+websockt实现简易单聊，群发消息
weixin_44315761的博客
03-15 782
使用websocket实现简易消息推送，STOMP协议来传输基于代理的消息
springboot+websocket实现即时通信
08-11
Spring Boot是一种Java开发框架，而WebSocket是一种Web技术，通过结合使用这两者可以实现即时通信。 Spring Boot提供了对WebSocket的支持，可以很容易地实现一个WebSocket服务器。通过使用Spring的WebSocket模块，我们可以创建一个处理WebSocket请求的Controller，使用@MessageMapping注解来处理客户端发送的消息。同时，我们可以使用@SendTo注解将消息发送给指定的订阅者。 要实现即时通信，通常使用的是点对点方式，即客户端发送消息给特定的目标客户端。我们可以通过在控制器类中使用@DestinationVariable注解来实现这一功能。在处理消息的方法中，我们可以获取目标客户端的信息，并将消息发送给该客户端。 此外，Spring Boot还提供了一些内置的Stomp（Simple Text Oriented Messaging Protocol）支持，Stomp是一种基于文本的消息协议，用于定义客户端和服务器之间的通信格式。使用Stomp协议可以更方便地进行消息的订阅和发布，并支持断开重连等功能。 总之，通过使用Spring Boot的WebSocket支持，我们可以轻松地实现即时通信功能。只需编写一个WebSocket控制器，处理客户端发送的消息，并将消息发送给指定的订阅者或目标客户端。同时，我们可以使用Stomp协议来更方便地进行消息的订阅和发布操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值