最简单入门的SpringBoot+Vue项目用WebSoket完整教程代码,做客服,即时通信的看过来!

本文主要是介绍最简单入门的SpringBoot+Vue项目用WebSoket完整教程代码,做客服,即时通信的看过来!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

后端原理不是很复杂 每次用户连接到服务端的时候会携带一个username,连接成功之后后端把username和当前soket添加到Map中

webSocketMap.put(username, this);

需要给指定用户发送消息的时候就通过username获取WebSoketServer通过.getBasicRemote().sendText()向用户发送消息

 for (Map.Entry<String, SongWebSoketServer> server : webSocketMap.entrySet()) {if(server.getKey().equals("接收消息的用户名")){server.getValue().session.getBasicRemote().sendText("想要发送的消息");}}

需要发送复杂消息的情况下可以New一个JSON对象

	JSONObject jsonObject = new JSONObject();jsonObject.put("code", 200);jsonObject.put("message", message);jsonObject.toJSONString();

完整代码:

前端页面中比较简单

<template><el-input v-model="content" /><el-button @click="send">发送</el-button>
</template>
<script>
export default {data() {return {socket: "",content: '',}},created() {this.init();},methods: {init: function () {if (typeof (WebSocket) === "undefined") {alert("您的浏览器不支持socket");} else {// 需要服务器配置开放后端端口// 实例化socketthis.socket = new WebSocket("ws://localhost:8080/websocket/" + "username");// 监听socket连接this.socket.onopen = this.open;// 监听socket错误信息this.socket.onerror = this.error;// 监听socket消息this.socket.onmessage = this.getMessage;}},open: function () {console.log("socket连接成功");},error: function () {console.log("连接错误");},getMessage: function (msg) {console.log(msg)},send: function () {this.socket.send(this.content);this.content = "";},close: function () {console.log("socket已经关闭");}},destroyed() {this.socket.onclose = this.close; // 销毁监听}
}
</script>
<style lang="scss" scoped>
</style>

SpirngBoot项目中创建WebSoket模块

pom中引入
 <!-- SpringBoot Websocket --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>
新建WebSoketServer
import com.alibaba.fastjson.JSONObject;
import com.ruoyi.common.utils.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Service;import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;@Component
@Service
@ServerEndpoint(value = "/websocket/{username}")
public class WebSoketServer {static final Logger loggger = LoggerFactory.getLogger(WebSoketServer.class);private static ConcurrentHashMap<String, WebSoketServer> webSocketMap = new ConcurrentHashMap<>();  // 用来存放每个客户端对应的MyWebSocket对象。   private Session session;    private String username = "";   // 接收username// 打开连接@OnOpenpublic void onOpen(Session session, @PathParam("username") String username) throws IOException {this.session = session;this.username = username;if (webSocketMap.containsKey(username)) {webSocketMap.remove(username);webSocketMap.put(username, this);} else {webSocketMap.put(username, this);}loggger.info("用户:" + username + "连接:当前在线人数为:" + webSocketMap.size());}// 关闭连接@OnClosepublic void onClose() {if (webSocketMap.containsKey(username)) {webSocketMap.remove(username);}loggger.info("用户" + username + "退出:当前在线人数为:" + webSocketMap.size());}// 接收消息@OnMessagepublic void onMessage(String message, Session session) {loggger.info("用户" + username + "消息:内容:" + message);}// 发送自定义消息public static void sendInfo(String message, String username) {loggger.info("发送消息到:" + username + ",内容:" + message);if (StringUtils.isNotBlank(username) && webSocketMap.containsKey(username)) {try {webSocketMap.get(username).sendMessage(message);} catch (Exception e) {loggger.error(e.getMessage(), e);}} else {loggger.error("用户" + username + ",不在线!");}}@OnErrorpublic void onError(Session session, Throwable error) {loggger.error("用户" + username + "错误:原因:" + error.getMessage());error.printStackTrace();}// 推送消息public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}
}

这篇关于最简单入门的SpringBoot+Vue项目用WebSoket完整教程代码,做客服,即时通信的看过来!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/279854

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template