springboot+websocket客服聊天

这篇具有很好参考价值的文章主要介绍了springboot+websocket客服聊天。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

续:spring boot 完整后端接口案例_cc&的博客-CSDN博客

后台代码

1.在pom.xml中添加spring-boot-starter-websocket

springboot+websocket客服聊天

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

 2. 添加配置,先在src\main\resources\application.yml中添加:

server:
  max-http-header-size: 8192

 如果不加的话可能导致无法进行访问。 

3.新建一个配置类,主要一个Bean,用来启动服务是也启动WebSocket服务

springboot+websocket客服聊天 

package com.cc.springServer.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class webSocketConfig {
    //WebSocket
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

 注意:这个类必须有@Configuration注解

4.新建一个model来封装进行对话的对象

springboot+websocket客服聊天 

package com.cc.springServer.entity;

import javax.websocket.Session;

public class SocketUserInfo {
    //用户sessionId
    private String sessionId;

    //用户session
    private Session session;

    //目标用户sessionid
    private String targetSessionId;

    //用户角色
    private String userRole;

    public String getUserRole() {
        return userRole;
    }

    public void setUserRole(String userRole) {
        this.userRole = userRole;
    }

    public String getSessionId() {
        return sessionId;
    }

    public void setSessionId(String sessionId) {
        this.sessionId = sessionId;
    }

    public Session getSession() {
        return session;
    }

    public void setSession(Session session) {
        this.session = session;
    }

    public String getTargetSessionId() {
        return targetSessionId;
    }

    public void setTargetSessionId(String targetSessionId) {
        this.targetSessionId = targetSessionId;
    }
}

 5.新建一个Controller类来管理Socket会话,它主要完成如下场景业务:

1.用户连接上线:如果是一个客服上线,就保存一个客服信息,同时去查找有没有再排队中的用户,如果有就给他们俩建立会话关系;如果是一个用户上线,先建立保存用户信息,再去查找有没有空闲客服,如果有就建立会话关系,如果没有就告诉他系统繁忙,让他进入等待状态。
2.用户下线:如果是客户下线,就删除客服信息,为了方便,我直接让用户刷新页面重新匹配客服,其实这样做不是很好;如果是用户下线,就删除用户信息,让空闲下来的客服和排队中的用户建立会话关系。
3.发送消息:如果是用户发的消息,就将消息推送给相应客服;如果是客服发的消息,就推送给相应用户。

springboot+websocket客服聊天

package com.cc.springServer.controller;

import com.alibaba.fastjson.JSON;
import com.cc.springServer.entity.SocketUserInfo;
import org.springframework.stereotype.Component;

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;

//参数role判断用户角色0是客服,1是用户
@ServerEndpoint(value = "/websocket/{role}")
@Component
public class webSocketController {

    //用本地线程保存session
    private static ThreadLocal<Session> sessions = new ThreadLocal<Session>();
    //保存所有连接上的用户的session
    private static Map<String, SocketUserInfo> userSessionMap = new ConcurrentHashMap<>();
    //保存在线客服的session
    private static Map<String, SocketUserInfo> serverSessionMap = new ConcurrentHashMap<>();

    //连接
    @OnOpen
    public void onOpen(Session session, @PathParam(value="role") Integer role) {

        //默认返回错误状态
        Map<String, String> resultMap = new HashMap<>();
        resultMap.put("state", "error");

        //保证各个线程里的变量相对独立于其他线程内的变量
        sessions.set(session);

        //客服上线
        if (role.equals(0)) {

            //创建一个在线客服信息
            SocketUserInfo serverInfo = new SocketUserInfo();
            serverInfo.setSessionId(session.getId());
            serverInfo.setSession(session);
            serverInfo.setUserRole("客服");

            //告诉客服连接成功
            resultMap.put("state", "success");

            //去查询是否有排队中的用户
            //如果存在排队的用户,就将用户和客服绑定
            if (findLineUser() != null){
                SocketUserInfo userInfo = userSessionMap.get(findLineUser());
                //将用户绑定到客服
                serverInfo.setTargetSessionId(userInfo.getSessionId());
                //将客服绑定到用户
                userInfo.setTargetSessionId(serverInfo.getSessionId());
                userSessionMap.put(userInfo.getSessionId(), userInfo);
                System.out.println("客户"+ serverInfo.getSessionId() + "正在为用户" + userInfo.getSessionId()+"服务");

                Map<String, String> result = new HashMap<>();
                //客服显示用户信息
                result.put("msg", "正在为用户"+userInfo.getSessionId()+"服务!");
                sendMsg(serverInfo.getSession(), JSON.toJSONString(result));
                //告诉用户有客服为他服务
                result.put("msg", "客服"+serverInfo.getSessionId()+"正在为您服务!");
                sendMsg(userInfo.getSession(), JSON.toJSONString(result));
            }

            //将在线客服信息保存到map中
            serverSessionMap.put(session.getId(), serverInfo);
            System.out.println("客服:" + serverInfo.getSessionId() + "连接上服务器,当前在线客服共计:" + serverSessionMap.size());
        }
        if (role.equals(1)) {

            //创建一个在线用户信息
            SocketUserInfo userInfo = new SocketUserInfo();
            userInfo.setSessionId(session.getId());
            userInfo.setSession(session);
            userInfo.setUserRole("用户");

            //告诉用户连接成功
            resultMap.put("state", "success");

            //去查询是否有在线的客服
            //有空闲客服就将用户和客服绑定
            if (findFreeServer() != null){
                SocketUserInfo serverInfo = serverSessionMap.get(findFreeServer());
                //将用户绑定到客服
                serverInfo.setTargetSessionId(userInfo.getSessionId());
                serverSessionMap.put(serverInfo.getSessionId(), serverInfo);
                //将客服绑定到用户
                userInfo.setTargetSessionId(serverInfo.getSessionId());
                System.out.println("客户"+ serverInfo.getSessionId() + "正在为" + userInfo.getSessionId()+"服务");

                Map<String, String> result = new HashMap<>();
                //客服显示用户信息
                result.put("msg", "正在为用户"+userInfo.getSessionId()+"服务!");
                sendMsg(serverInfo.getSession(), JSON.toJSONString(result));
                result.put("msg", "客服"+serverInfo.getSessionId()+"正在为您服务!");
                sendMsg(userInfo.getSession(), JSON.toJSONString(result));
            } else {
                //告诉用户系统繁忙
                resultMap.put("msg", "系统繁忙!");
            }

            //将在线用户信息保存到map中
            userSessionMap.put(session.getId(), userInfo);
            System.out.println("用户编号:" + userInfo.getSessionId() + "连接上服务器,当前在线用户共计:" + userSessionMap.size());
        }
        //返回连接信息
        String result = JSON.toJSONString(resultMap);
        System.out.println(result);
        sendMsg(session, result);
    }

    //关闭连接
    @OnClose
    public void onClose(Session session) {
        SocketUserInfo serverInfo = serverSessionMap.get(session.getId());
        //客服下线
        if (serverInfo != null) {
            //将客户从map中移除
            serverSessionMap.remove(session.getId());

            //查看是否有服务服务对象
            if (null != serverInfo.getTargetSessionId()){
                //给用户说系统错误
                Map<String, String> result = new HashMap<>();
                result.put("msg", "系统错误,请刷新重试!");
                sendMsg(userSessionMap.get(serverInfo.getTargetSessionId()).getSession(), JSON.toJSONString(result));
            }
            System.out.println("客服编号:" + serverInfo.getSessionId() + "退出了连接,当前在线客服共计:" + serverSessionMap.size());
        } else {//用户下线
            //将用户从map中移除
            userSessionMap.remove(session.getId());

            //从客服中解绑
            for (SocketUserInfo serverSocketInfo: serverSessionMap.values()) {
                //查找绑定的客服,即客服绑定的用户不为空,并且绑定的用户id和现在下线的用户id一样
                if (serverSocketInfo.getTargetSessionId() != null && serverSocketInfo.getTargetSessionId().equals(session.getId())){
                    //解绑
                    serverSocketInfo.setTargetSessionId(null);
                    serverSessionMap.put(serverSocketInfo.getSessionId(), serverSocketInfo);
                    System.out.println("用户编号:" + session.getId() + "断开了与客服" + serverSocketInfo.getSessionId() + "的连接");

                    //客服解绑以后,可能还会有在线排队的用户,就让这个客服去
                    String lineUser = findLineUser();
                    if (lineUser != null){
                        //将用户绑定到客服
                        serverSocketInfo.setTargetSessionId(lineUser);
                        serverSessionMap.put(serverSocketInfo.getSessionId(), serverSocketInfo);
                        //将客服绑定到用户
                        userSessionMap.get(lineUser).setTargetSessionId(serverSocketInfo.getSessionId());
                        System.out.println("客户"+ serverSocketInfo.getSessionId() + "正在为" + lineUser+"服务");

                        Map<String, String> result = new HashMap<>();
                        //客服显示用户信息
                        result.put("msg", "正在为用户"+lineUser+"服务!");
                        sendMsg(serverSocketInfo.getSession(), JSON.toJSONString(result));
                        //用户显示客户信息
                        result.put("msg", "客服"+serverSocketInfo.getSessionId()+"正在为您服务!");
                        sendMsg(userSessionMap.get(lineUser).getSession(), JSON.toJSONString(result));
                    }
                }
            }
            System.out.println("用户编号:" + session.getId() + "退出了连接,当前在线用户共计:" + userSessionMap.size());
        }
    }

    //用户和客户端互相传递消息
    @OnMessage
    public void onMessage(String message, Session session) {
        //消息
        Map<String, String> result = new HashMap<>();

        SocketUserInfo serverInfo = serverSessionMap.get(session.getId());
        //客服消息
        if (serverInfo != null) {
            System.out.println("客服"+ session.getId()+"发送消息:\""+ message +"\"给用户"+serverSessionMap.get(session.getId()).getTargetSessionId());
            result.put("msg", "客服"+session.getId()+":"+message);
            //将消息发送给用户
            //要判断是否绑定到有用户如果有就将消息传递到用户
            if (null != serverSessionMap.get(session.getId()).getTargetSessionId()){
                sendMsg(userSessionMap.get(serverSessionMap.get(session.getId()).getTargetSessionId()).getSession(), JSON.toJSONString(result));
            } else {//如果没有就将消息给自己,嘻嘻嘻
                sendMsg(session, JSON.toJSONString(result));
            }

        } else {//用户消息
            System.out.println("用户"+ session.getId()+"发送消息:\""+ message +"\"给客户"+userSessionMap.get(session.getId()).getTargetSessionId());
            result.put("msg", "用户"+session.getId()+":"+message);
            //将消息发送给客服
            //判断是否绑定了客服,如果有就发送消息
            if (null != userSessionMap.get(session.getId()).getTargetSessionId()){
                sendMsg(serverSessionMap.get(userSessionMap.get(session.getId()).getTargetSessionId()).getSession(), JSON.toJSONString(result));
            } else{//同上
                sendMsg(session,JSON.toJSONString(result));
            }
        }
    }

    //异常
    @OnError
    public void onError(Session session, Throwable throwable) {
        System.out.println("发生异常!");
        throwable.printStackTrace();
    }



    //统一的发送消息方法
    private synchronized void sendMsg(Session session, String msg) {
        try {
            session.getBasicRemote().sendText(msg);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //查询排队用户
    private synchronized String findLineUser(){
        //判断是否有用户
        if (userSessionMap.size() > 0){
            //遍历所有用户,查找一个排队的用户
            for (SocketUserInfo UserInfo: userSessionMap.values()) {
                if (null == UserInfo.getTargetSessionId()){
                    return UserInfo.getSessionId();
                }
            }
        }
        return null;
    }

    //查询在线空闲客服
    private  synchronized String findFreeServer(){
        //判断是否有客服
        if (serverSessionMap.size() > 0){
            //遍历所有客服,查找一个空闲的客服
            for (SocketUserInfo serverInfo: serverSessionMap.values()) {
                if (null == serverInfo.getTargetSessionId()){
                    return serverInfo.getSessionId();
                }
            }
        }
        return null;
    }
}

后台代码到这来就完成了。


前端代码

1) 客户端


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>辕门-在线咨询</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<p id="message"></p>
	<form id="clientChat">
		<input type="text" style="display: none;" id="userName"  />
		<input type="text" style="display: none;" id="targetUserName" />
		<input type="text" id="sendMsg"></input>
		<button type="button" onclick="send()">发送</button>
	</form>
</body>
<script>
var websocket = null;

var userId = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
    websocket = new WebSocket("ws://127.0.0.1:9999/websocket/1");
} else {
    alert("Don't support websocket!")
}

//连接发生错误的回调方法
websocket.onerror = function(){
    alert("Connect error!");
};

//连接成功建立的回调方法
websocket.onopen = function(event){
    setMessageInnerHTML("连接已建立!");
}

//接收到消息的回调方法
websocket.onmessage = function(event){
	var result = event.data
	var ob = JSON.parse(result)
	//判断用户状态
	if(ob.state != undefined && ob.state != "success"){
		setMessageInnerHTML("非法连接!");
		websocket.close();
	}
	
	//判断是否有消息
	if(ob.msg != undefined){
		setMessageInnerHTML(ob.msg);
	}
}

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

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

//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
    document.getElementById('message').innerHTML += innerHTML + '<br/>';
}

//关闭连接
function closeWebSocket(){
    websocket.close();
}

//发送消息
function send(){
	var sendMsg = $("#sendMsg").val();
	setMessageInnerHTML("我 :" + sendMsg)
    websocket.send(sendMsg);
    $("#sendMsg").val("");
}
</script>
</html>

springboot+websocket客服聊天 

2)服务端

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>辕门-IM</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<p id="message"></p>
	<form id="clientChat">
		<input type="text" style="display: none;" id="userName"  />
		<input type="text" style="display: none;" id="targetUserName" />
		<input type="text" id="sendMsg"></input>
		<button type="button" onclick="send()">发送</button>
	</form>
</body>
<script>
var websocket = null;

var userId = null;

//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
    websocket = new WebSocket("ws://127.0.0.1:9999/websocket/0");
} else {
    alert("Don't support websocket!")
}

//连接发生错误的回调方法
websocket.onerror = function(){
    alert("Connect error!");
};

//连接成功建立的回调方法
websocket.onopen = function(event){
    setMessageInnerHTML("连接已建立!");
}

//接收到消息的回调方法
websocket.onmessage = function(event){
	var result = event.data
	var ob = JSON.parse(result)
	//判断用户状态
	if(ob.state != undefined && ob.state != "success"){
		setMessageInnerHTML("非法连接!");
		websocket.close();
	}
	
	//判断是否有消息
	if(ob.msg != undefined){
		setMessageInnerHTML(ob.msg);
	}
}

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

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

//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
    document.getElementById('message').innerHTML += innerHTML + '<br/>';
}

//关闭连接
function closeWebSocket(){
    websocket.close();
}

//发送消息
function send(){
	var sendMsg = $("#sendMsg").val();
	setMessageInnerHTML("我 :" + sendMsg)
    websocket.send(sendMsg);
    $("#sendMsg").val("");
}
</script>
</html>

 springboot+websocket客服聊天

 文章来源地址https://www.toymoban.com/news/detail-488481.html

 

到了这里,关于springboot+websocket客服聊天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • springboot+websocket实现简单的聊天室

    HTML HTML是创建和构造网页的标准标记语言。它使用一组标记标签描述网页上的内容结构。HTML文档由HTML元素的嵌套结构组成,每个元素由尖括号( )括起的标签表示。这些元素定义了网页的各个部分,如标题、段落、图像、链接、表单等。 JavaScript JavaScript是一种高级、解释性

    2024年01月21日
    浏览(60)
  • Springboot + websocket 实现 一对一 单人聊天

    Springboot + websocket   实现 一对一 单人聊天 打开项目中的pom.xml,添加以下内容 配置websocke的endpoints 配置websocket的server @ServerEndpoint (value = \\\"/websocket/{username}\\\" ) 这句话 一定要注意, 这里 路径指定的是 页面需要访问的server的地址, {username} 表示需要传递参数 为刚刚的类 添加 属性

    2024年01月17日
    浏览(106)
  • 在线聊天室(Vue+Springboot+WebSocket)

    实现了一个简单的在线聊天室的前后端。前端用Vue实现,后端用Springboot实现。         在线聊天室的功能包括创建用户和显示在线用户列表、发送消息和显示消息列表、用户和消息列表实时更新这几点。以下是整体功能的活动图: 用户身份         进入聊天室的用户需

    2024年01月15日
    浏览(52)
  • SpringBoot集成WebSocket实现及时通讯聊天功能!!!

    注意:   至此,后端代码就集成完了,集成完之后,记得重启你的Springboot项目 前端Vue 1:新建Vue 页面  路由: 代码:路由根据你项目的实际情况写 在用户登录的时候,需要将你的用户名存储到本地Session 中  效果图:  用户甲:   用户乙:   注:网上学习来源 SpringBoot集

    2024年02月01日
    浏览(43)
  • SpringBoot+Vue 整合websocket实现简单聊天窗口

    1 输入临时名字充当账号使用 2 进入聊天窗口 3 发送消息 (复制一个页面,输入其他名字,方便展示效果) 4 其他窗口效果 pom依赖 WebSocketConfig.java WebSocketServer.java MessageVo.java App.vue

    2024年02月09日
    浏览(46)
  • 基于springboot与websocket实现简易聊天室

    创建一个简单聊天室的HTML和JavaScript代码,匹配相应的css样式,这个聊天室将使用WebSocket技术,允许用户实时发送和接收消息。 1.1 html和js代码 通过new WebSocket(url)建立一个新的websocket连接。websocket连接建立之后使用websocket.onopen,websocket.onclose,websocket.onerror等方法实时监测we

    2024年02月01日
    浏览(57)
  • SpringBoot与webSocket实现在线聊天室——实现私聊+群聊+聊天记录保存

    引用参考:原文章地址:https://blog.csdn.net/qq_41463655/article/details/92410518 在此基础上实现对聊天记录的保存。 代码地址:链接:https://pan.baidu.com/s/1IJFZDa4S_DF08773sKJWeA 提取码:jkui 思路:新建一个实体类用于保存聊天记录,在消息发送时,设置对象的各个值然后保存到数据库中。

    2024年02月02日
    浏览(57)
  • 基于SpringBoot+Vue+WebSocket的在线聊天室

    WebSocket 是一种在 Web 应用程序中实现双向通信的协议。它提供了一种持久连接,允许客户端和服务器之间进行实时数据传输,而无需进行频繁的请求和响应。 相对于传统的 HTTP 请求-响应模式,WebSocket 在客户端和服务器之间建立起一条长久的双向通信通道。这意味着服务器可

    2024年01月16日
    浏览(72)
  • SpringBoot整合 websocket 实现群聊,点对点聊天

    1.websocket websocket最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。浏览器和服务器只需要要做一个握手的动作,在建立连接之后,服务器可以主动传送数据给客户端,客户端也可以随时向服务器发送数据。 第一、WebSocket是HTML5中的协议,支

    2024年02月08日
    浏览(39)
  • SpringBoot+Netty+Vue+Websocket实现在线推送/聊天系统

    ok,那么今天的话也是带来这个非常常用的一个技术,那就是咱们完成nutty的一个应用,今天的话,我会介绍地很详细,这样的话,拿到这个博文的代码就基本上可以按照自己的想法去构建自己的一个在线应用了。比如聊天,在线消息推送之类的。其实一开始我原来的想法做在

    2024年02月03日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包