基于SockJS stomp的聊天系统——前后端

最新推荐文章于 2024-08-13 01:35:44 发布
最新推荐文章于 2024-08-13 01:35:44 发布
阅读量1.3k 收藏 8
点赞数
分类专栏： other
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39506978/article/details/107770399
版权

效果图

 

 

1.依赖

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

2.websocket配置

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    
	@Override
	//定义几个前缀，重要
    public void configureMessageBroker(MessageBrokerRegistry config) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic");
        //默认也是/user/
        registry.setUserDestinationPrefix("/user");
	}


   
	@Override
     //websocket端点，及跨域
	public void registerStompEndpoints(StompEndpointRegistry registry) {
		registry.addEndpoint("/my-websocket").setAllowedOrigins("*").withSockJS();
	}
}

3.监听各个事件，这些事件对于原生websocket各种事件（主要是用户上下线，进出入房间放Redis缓存session及各种系统通知） 

package com.cloudride.modules.user.other;

import com.cloudride.common.constant.RedisConstant;
import com.cloudride.modules.user.util.WebSocketUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationEvent;
import org.springframework.context.ApplicationListener;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.messaging.*;

import java.util.Map;
import java.util.Set;

@Slf4j
@Component
public class STOMPConnectEventListener implements ApplicationListener {

    @Autowired
    private RedisTemplate redisTemplate;
    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @Override
    public void onApplicationEvent(ApplicationEvent event) {
        //进入系统存入session
        if (event instanceof SessionConnectEvent) {
            SessionConnectEvent connectEvent = (SessionConnectEvent) event;
            StompHeaderAccessor accessor = StompHeaderAccessor.wrap(connectEvent.getMessage());
            String userId = accessor.getNativeHeader("userId").get(0);
            String sessionId = accessor.getSessionId();
            redisTemplate.opsForHash().put(RedisConstant.SYSTEM_USER, userId, sessionId);
            log.info("{}进入系统", userId);

        } else if (event instanceof SessionConnectedEvent) {
            Long size = redisTemplate.opsForHash().size(RedisConstant.SYSTEM_USER);
            log.info("系统当前已有人数:{}", size);
         //进入房间，存入session并群发通知
        } else if (event instanceof SessionSubscribeEvent) {
            SessionSubscribeEvent subscribeEvent = (SessionSubscribeEvent) event;
            StompHeaderAccessor accessor = StompHeaderAccessor.wrap(subscribeEvent.getMessage());
            Map<String, String> systemUsers = redisTemplate.opsForHash().entries(RedisConstant.SYSTEM_USER);
            Map<String, String> chatRoomUsers = redisTemplate.opsForHash().entries(RedisConstant.CHAT_ROOM_USER);
            String fullDestination = (String) accessor.getMessageHeaders().get("simpDestination");
            String currentUserSessionId = accessor.getSessionId();
            String currentUserId = null;
            for (Map.Entry<String, String> entry : systemUsers.entrySet()) {
                if (currentUserSessionId.equals(entry.getValue())) {
                    currentUserId = entry.getKey();
                    redisTemplate.opsForHash().put(RedisConstant.CHAT_ROOM_USER, entry.getKey(), currentUserSessionId);
                    messagingTemplate.convertAndSendToUser(currentUserSessionId, fullDestination.replaceFirst("/user/", "/"), "系统消息:你已进入了聊天室,当前房间人数:" + (chatRoomUsers.size() + 1), WebSocketUtils.createMessageHeaders(entry.getValue()));

                }
            }
            for (Map.Entry<String, String> entry : chatRoomUsers.entrySet()) {
                messagingTemplate.convertAndSendToUser(entry.getValue(), fullDestination.replaceFirst("/user/", "/"), "系统消息:" + currentUserId + "进入了聊天室,当前房间人数:" + (chatRoomUsers.size() + 1), WebSocketUtils.createMessageHeaders(entry.getValue()));

            }
         //删除session并群发通知
        } else if (event instanceof SessionUnsubscribeEvent) {
            SessionUnsubscribeEvent unsubscribeEvent = (SessionUnsubscribeEvent) event;
            StompHeaderAccessor accessor = StompHeaderAccessor.wrap(unsubscribeEvent.getMessage());
            Map<String, String> users = redisTemplate.opsForHash().entries(RedisConstant.SYSTEM_USER);
            String currentUserSessionId = accessor.getSessionId();
            String currentUserId = null;
            for (Map.Entry<String, String> entry : users.entrySet()) {
                if (currentUserSessionId.equals(entry.getValue())) {
                    redisTemplate.opsForHash().delete(RedisConstant.CHAT_ROOM_USER, entry.getKey());
                    currentUserId = entry.getKey();
                    messagingTemplate.convertAndSendToUser(currentUserSessionId, accessor.getSubscriptionId(), "系统消息:成功退出聊天室", WebSocketUtils.createMessageHeaders(entry.getValue()));

                }
            }
            Map<String, String> chatRoomUsers = redisTemplate.opsForHash().entries(RedisConstant.CHAT_ROOM_USER);
            for (Map.Entry<String, String> entry : chatRoomUsers.entrySet()) {
                messagingTemplate.convertAndSendToUser(entry.getValue(), accessor.getSubscriptionId(), "系统消息:" + currentUserId + "退出了聊天室,当前房间人数:" + chatRoomUsers.size(), WebSocketUtils.createMessageHeaders(entry.getValue()));

            }
            //退出系统，删除session并群发通知
        } else if (event instanceof SessionDisconnectEvent) {
            SessionDisconnectEvent disconnectEvent = (SessionDisconnectEvent) event;
            StompHeaderAccessor accessor = StompHeaderAccessor.wrap(disconnectEvent.getMessage());
            String currentUserSessionId = accessor.getSessionId();
            Map<String, String> users = redisTemplate.opsForHash().entries(RedisConstant.SYSTEM_USER);
            Set chatRoomUserIds = redisTemplate.opsForHash().entries(RedisConstant.CHAT_ROOM_USER).keySet();
            String currentUserId = null;
            for (Map.Entry<String, String> entry : users.entrySet()) {
                if (currentUserSessionId.equals(entry.getValue())) {
                    redisTemplate.opsForHash().delete(RedisConstant.SYSTEM_USER, entry.getKey());
                    redisTemplate.opsForHash().delete(RedisConstant.CHAT_ROOM_USER, entry.getKey());
                    currentUserId=entry.getKey();
                } else {
                    if (chatRoomUserIds.contains(entry.getKey())) {
                        messagingTemplate.convertAndSendToUser(entry.getValue(), "/topic/AAA", "系统消息:" +currentUserId + "下线了", WebSocketUtils.createMessageHeaders(entry.getValue()));
                    }
                }

            }

        }

    }
}

4.相当于一个聊天接口，但是不同于一般restful接口。入参封装在实体类SocketMessage，如果toUser为空则为群发 

package com.cloudride.modules.user.controller;

import com.cloudride.common.constant.RedisConstant;
import com.cloudride.modules.user.entity.SocketMessage;
import com.cloudride.modules.user.util.WebSocketUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import java.util.Map;

@Controller
public class ChatController {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;
    @Autowired
    private RedisTemplate redisTemplate;

    @MessageMapping("/send")
    public void send(SocketMessage message) throws Exception {
        message.setDate(LocalTime.now().format(DateTimeFormatter.ofPattern("HH:mm:ss")));
        //群发
        if (StringUtils.isBlank(message.getToUser())) {
            Map<String, String> chatRoomUsers = redisTemplate.opsForHash().entries(RedisConstant.CHAT_ROOM_USER);
            for (Map.Entry<String, String> entry : chatRoomUsers.entrySet()) {
                if (!entry.getKey().equals(message.getFromUser())) {
                    messagingTemplate.convertAndSendToUser(entry.getValue(), "/topic/AAA", message, WebSocketUtils.createMessageHeaders(entry.getValue()));

                }
            }
        } else {//私聊
            String sessionId = (String) redisTemplate.opsForHash().get(RedisConstant.CHAT_ROOM_USER, message.getToUser());
            messagingTemplate.convertAndSendToUser(sessionId, "/topic/AAA", message, WebSocketUtils.createMessageHeaders(sessionId));
        }
    }

}

5.实体类与工具类

@Getter
@Setter
public class SocketMessage {
    private String fromUser;
	private String toUser;
	private String message;
	private String date;

}



public class WebSocketUtils {

        public static MessageHeaders createMessageHeaders(String sessionId) {
        SimpMessageHeaderAccessor headerAccessor = SimpMessageHeaderAccessor.create(SimpMessageType.MESSAGE);
        headerAccessor.setSessionId(sessionId);
        headerAccessor.setLeaveMutable(true);
        return headerAccessor.getMessageHeaders();
    }
}

6.Vue前端 vue-cli创建一个干净的Vue项目，需要安装3个js库

cnpm install sockjs-client --save

cnpm install stompjs --save

cnpm install net --save

将HellloWord.vue内容全部替换为

<template>
	<div>
		用户ID:<input v-model="userId">
		<button @click="connect">登录聊天室</button>
		<button @click="leave">退出聊天室</button>
		<button @click="offline">下线</button>
		发送给：
		<input v-model="message.toUser">
		消息：<input v-model="message.message">
		<button @click="send">发送</button>
		接受到消息：
		<div v-html="info">
		</div>
	</div>
</template>
<script>
	import SockJS from "sockjs-client"
	import Stomp from "stompjs"
	export default {
		data() {
			return {
				userId: "",
				stompClient: null,
				message: {
					toUser: '',
					fromUser:'',
					message: ''
				},
				info: ""
			}
		},
		methods: {
			connect() {
				let socket = new SockJS('http://192.168.0.166:8181/my-websocket')
				this.stompClient = Stomp.over(socket)
				this.stompClient.connect({
					"userId": this.userId
				}, this.connectSuccess, this.connectError);
			},
			//注意/user前缀见后端配置类
			connectSuccess(obj) {
				this.stompClient.subscribe('/user/topic/AAA', (msg) => {
					if (msg.body.startsWith("系统消息")) {
						this.info += "<br>" + msg.body;
					} else {
						let body = JSON.parse(msg.body)
						this.info += "<br>==>" + body.date + "  "+body.fromUser+"说:" + body.message
					}


				})
			},
			connectError(err) {
				console.log("网络异常")
			},
            //注意/app前缀，/app/send映射到后端chatController
			send() {
				this.message.fromUser=this.userId;
				this.info += "<br>                               <== "+this.message.message;
				this.stompClient.send("/app/send", {}, JSON.stringify(this.message));
			},
			offline() {
				this.stompClient.disconnect();
				this.info += "<br>成功退出系统";
			},
			//注意这里不用前缀
			leave() {
				this.stompClient.unsubscribe('/topic/AAA')
			}
		}
	}
</script>

 

 

jwolf2
关注
专栏目录
websocket系列:基于SockJS和STOMP实现
弹指天下
02-19 1585
如何基于SockJS和STOMP实现websocket，构建交互式web应用。
websocket(三)–基于sockjs和stomp实现点对点通信
panda-star的博客
03-29 1710
websocket(三)–基于sockjs和stomp实现点对点通信 文章目录websocket(三)--基于sockjs和stomp实现点对点通信一、简介二、新知识点2.1 org.springframework.messaging.simp.SimpMessagingTemplate2.2 @SendToUser2.3 java.security.Principal2.4 org.spring...
websocket(二)–基于sockjs和stomp实现广播通信
panda-star的博客
03-29 605
websocket(二)–基于sockjs和stomp实现广播通信 文章目录websocket(二)--基于sockjs和stomp实现广播通信一、简介二、知识点2.1 sockjs2.2、stomp三、后端知识点3.1 注解@EnableWebSocketMessageBroker3.2 WebSocketMessageBrokerConfigurer类3.3 @MessageMapping3....
socket后端
溜溜奇的博客
11-13 607
class Program { //创建一个和客户端通信的套接字 static Socket SocketWatch = null; //定义一个集合，存储客户端信息 static Dictionary&lt;string, Socket&gt; ClientConnectionItems = new Dictionary...
SimpMessagingTemplate 介绍
最新发布
qq_42572322的博客
08-13 379
1. **convertAndSend**: 这是最常用的方法，用于将消息发送到指定的目的地。3. **setUserDestinationPrefix**: 配置用于目标特定用户目的地的前缀。默认值是 "/user/"。2. **convertAndSendToUser**: 此方法允许向特定用户发送消息。这些方法提供了灵活的消息发送机制，可以根据不同的场景选择合适的方法来实现 WebSocket 通信。4. **setSendTimeout**: 配置发送操作使用的超时值（以毫秒为单位）。
SpringCloud Sockjs 前后端分离 实现WebSocket点对点发送消息
chenzhinai2023的博客
08-28 1329
项目后端架构采用SpringCloud+SpringBoot，前段使用Vue + SockJS。 三方框架 版本 SpringCloud Dalston.SR4 SpringBoot 1.5.10...
实现websocket使用sockjs和stomp遇到的问题
pushme_pli的专栏
12-08 8951
今天在捣鼓websocket的时候遇到了麻烦，本想着比较简单就照着Spring boot给的教程： https://spring.io/guides/gs/messaging-stomp-websocket/ 没想到client端怎么都连不到server端，刚看到console中打出来： Web Socket Opened... 接着没多久就报错： Whoops! Lost connec...
SpringBoot+sockjs client+stompjs实现websocket
weixin_34112900的博客
04-10 1260
Grade构建依赖 build.gradle文件配置如下 buildscript { ext { springBootVersion = '1.5.9.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradl...
stomp.js和sockjs.js
06-05
stomp.js是专门为WebSocket设计的JavaScript客户端库，它提供了STOMP协议的实现，使得开发者可以在浏览器端方便地订阅和发布消息。 stomp.min.js文件是stomp.js的压缩版本，用于减少网络传输的大小，提高页面加载...
react-stomp:通过SockJs对STOMP协议进行ReactWebsocket组件
05-02
npm install --save react-stomp 用法示例 import React from 'react' ; import SockJsClient from 'react-stomp' ; class SampleComponent extends React . Component { constructor ( props ) { super ( props )...
c语言实现stomp协议客户端,在vue中使用SockJS实现webSocket通信
weixin_35756690的博客
05-22 508
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和 服务器 端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程:前提要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关的通信接口.来完成客户端和服务端的通信.实现通信,我们需要用到另个模块 sockj...
Spring websocket+Stomp+SockJS 实现实时通信 详解
04-18
Http连接为一次请求(request)一次响应(response)，必须为同步调用方式。WebSocket 协议提供了通过一个套接字实现全双工通信的功能。一次连接以后，会建立tcp连接，后续客户端与服务器交互为全双工方式的交互方式，客户端可以发送消息到服务端，服务端也可将消息发送给客户端。 SockJS 是 WebSocket 技术的一种模拟。为了应对许多浏览器不支持WebSocket协议的问题，设计了备选SockJs。开启并使用SockJS后，它会优先选用Websocket协议作为传输协议，如果浏览器不支持Websocket协议，则会在其他方案中，选择一个较好的协议进行通讯。........
在centos下使用SockJS和STOMP.js运行时报错
gong0585的专栏
01-15 1215
1.配置环境 CentOS-8.1.1911-x86_64-dvd1.iso SpringBoot2.1.2.RELEASE stomp-websocket2.3.3-1 2.chrome浏览器报，错误提示如下： Opening Web Socket... stomp.js:145 Whoops! Lost connection to http://192.168.7.3/ws/shootingpoint VM321 htmlfile:8 Uncaught DOMException: Bl..
websocket+sockjs+stompjs解析及项目实战
前进者
10-29 3305
目录 一、背景介绍 二、STOMP Over WebSocket 三、web实现 四、总结 一、背景介绍 之前的项目，用的原始的WebSocket （菜鸟课程里面有详细的说明 菜鸟课程的网址：https://www.runoob.com/html/html5-websocket.html）实现后台消息的主动推送，但是这种方式过于偏向底层，需要开发人员去手动的保存用户连接到websoc...
websocket如何携带header或参数
热门推荐
weixin_44330810的博客
09-16 4万+
websocket如何携带header或参数
基于SockJS+Stomp的WebSocket实现
hualuojinarr的博客
03-30 2408
基于SockJS+Stomp的WebSocket实现
【SpringBoot实战】WebSocket+Stomp+SockJs实现客户端状态监听
qq_21609191的博客
10-28 3293
对于SpringBoot而言，使用传统WebSocket监听客户端状态想必大家已经很熟悉了，比如@onClose和@onOpen注解可以用来监听客户端连线状态，但SockJs在使用上并没有可直接使用的注解或方法对客户端进行监听，这边提供了一些方法，看起来也并不复杂。以下让我们来了解一下SpringBoot的SockJs如何来对客户端进行监听。提示：以下是本篇文章正文内容，下面案例可供参考接下来，我们新建一个（自定义握手管理器）类，继承自（默认握手管理器）。重写方法，从对象中可以获取到客户端信息。
使用 Spring Boot+vue 实现在线聊天的代码
05-17
这里提供一个简单的示例，使用Spring Boot作为后端和Vue.js作为前端来实现在线聊天。 1. 创建Spring Boot项目 首先，我们需要创建一个Spring Boot项目。在这里，我们使用Spring Initializr创建一个Maven项目。在dependencies中添加Web和WebSocket依赖。 2. 添加WebSocket配置类 在/src/main/java/目录下创建一个config包，并创建一个WebSocketConfig类。在这个类中，我们配置了一个WebSocketHandler，用于处理WebSocket请求。 ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*"); } private class ChatWebSocketHandler extends TextWebSocketHandler { private final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { for (WebSocketSession s : sessions) { if (s.isOpen()) { s.sendMessage(message); } } } } } ``` 3. 创建一个ChatController类 在/src/main/java/目录下创建一个controller包，并创建一个ChatController类。在这个类中，我们处理聊天页面的请求。 ```java @RestController @RequestMapping("/chat") public class ChatController { @GetMapping public ModelAndView chat() { return new ModelAndView("chat"); } } ``` 4. 创建一个ChatMessage类 在/src/main/java/目录下创建一个model包，并创建一个ChatMessage类。这个类用于表示聊天消息。 ```java public class ChatMessage { private String sender; private String content; public ChatMessage() { } public ChatMessage(String sender, String content) { this.sender = sender; this.content = content; } // getter and setter } ``` 5. 创建一个Vue.js聊天页面 在/src/main/resources/static/目录下创建一个chat.html文件。在这个文件中，我们引入Vue.js和Sock.js，并创建一个Vue实例。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Chat</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.4.0/dist/sockjs.min.js"></script> </head> <body> <div id="app"> <div v-for="message in messages"> {{ message.sender }}: {{ message.content }} </div> <input v-model="content" @keyup.enter="send"> </div> <script> new Vue({ el: '#app', data: { messages: [], content: '' }, created: function () { var socket = new SockJS('/chat'); var self = this; socket.onmessage = function (event) { var message = JSON.parse(event.data); self.messages.push(message); }; }, methods: { send: function () { var message = { sender: 'user', content: this.content }; this.messages.push(message); var socket = new SockJS('/chat'); socket.send(JSON.stringify(message)); this.content = ''; } } }); </script> </body> </html> ``` 6. 运行应用程序 现在，我们可以运行应用程序，并访问http://localhost:8080/chat，看到一个简单的聊天页面。在多个浏览器窗口中打开该页面，并开始聊天。 代码示例：https://github.com/zhangchaoxu/spring-boot-vue-chat
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值