devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

好用的在线客服系统PHP源码(开源代码+终身使用+安装教程)_在线客服源码

作者：知新_RL | 2024-04-28 02:41:14

赞

踩

在线客服源码

​在线客服系统是一套交互式沟通工具，采用PHP+MYSQL开发。高性能，不卡顿。使用它可以迅速缩小你的选择范围，联系多个供应商、客户等，也可以给你的企业一个关于用户体验的重大影响。（尾部下载完整版PHP客服系统源码）
在这里插入图片描述
在这里插入图片描述

一，思路梳理

1，首先思考群聊的实现方式。
​2，再来举一反三，思考单聊的实现方式。
有一个地方需要提一下，比如要给A用户发送消息，就要根据A的userId得到连接对象，然后就会把消息发送给A用户。

二，代码分析

1，首先是用户聊天框的js代码（html忽略）
此为用户点击在线客服按钮进入聊天框页面就执行的js代码。

说明：下面接收人id写死了为超级管理员，我这里省事情了，因为超级管理员的账号（也就是唯一标识）就是超级管理员这五个字，当真正开发时就要动态获取唯一标识了！

<span style="color:#314659"><span style="background-color:#ffffff"><code class="language-javascript language-js"><script type=<span style="color:#c18401 !important">"text/javascript"</span>>
	<span style="color:#999999 !important"><em>//1，获取连接，new WebSocket()</em></span>
	<span style="color:#999999 !important"><em>//获取到路径url的参数（用户的手机号，这里将手机号作为了用户的唯一标识）</em></span>
    <span style="color:#4078f2 !important">var</span> accounta=<span style="color:#c18401 !important">window</span>.location.search;
    <span style="color:#4078f2 !important">var</span> account=accounta.<span style="color:#50a14f !important">slice</span>(<span style="color:#ae81ff !important">9</span>);
    <span style="color:#999999 !important"><em>//发送人id</em></span>
    <span style="color:#4078f2 !important">var</span> sb=account;
	<span style="color:#999999 !important"><em>//将发送人id参数传给服务端</em></span>
	<span style="color:#4078f2 !important">var</span> wsUrl=<span style="color:#c18401 !important">"ws://127.0.0.1:8082/charRoomServer"</span>;
	<span style="color:#4078f2 !important">var</span> allUrl=wsUrl+<span style="color:#c18401 !important">"/"</span>+sb;
	<span style="color:#999999 !important"><em>//接收人id</em></span>
	<span style="color:#4078f2 !important">var</span> jsrid=<span style="color:#c18401 !important">'超级管理员'</span>;
	<span style="color:#999999 !important"><em>//客户端与服务端建立连接，建立连接以后，它会发出一个ws.open事件</em></span>
	<span style="color:#4078f2 !important">var</span> ws=<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">WebSocket</span>(allUrl);
	<span style="color:#999999 !important"><em>//连接成功后就将接收人id发送给服务端</em></span>
	ws.onopen=<span style="color:#4078f2 !important">function</span>(){
		ws.<span style="color:#50a14f !important">send</span>(jsrid);
	}
	<span style="color:#999999 !important"><em>//客户端收到服务端发送的消息</em></span>
	ws.onmessage=<span style="color:#4078f2 !important">function</span>(message){
	    <span style="color:#4078f2 !important">var</span> shenfen=<span style="color:#50a14f !important">JSON</span>.<span style="color:#50a14f !important">stringify</span>(message.data).<span style="color:#50a14f !important">toString</span>();
	    <span style="color:#4078f2 !important">var</span> shenfens=shenfen.<span style="color:#50a14f !important">slice</span>(shenfen.<span style="color:#50a14f !important">lastIndexOf</span>(<span style="color:#c18401 !important">"|"</span>)+<span style="color:#ae81ff !important">1</span>,-<span style="color:#ae81ff !important">1</span>);
     <span style="color:#999999 !important"><em>//这里通过很low的方式拿到了发送人id  [shenfens]（后台拼接字符串并前台截取得到）   </em></span>
     <span style="color:#999999 !important"><em>//判断发送人id是否和页面初始化时的接收人id（jsrid）是否一致，相同则说明是对方回复的消息，并将该消息添加到自己的聊天框；如果收到的发送人id与“大白机器人”或者是和自己的id一致，也要将消息添加到自己的聊天框（自己发的消息嘛）</em></span>
        <span style="color:#4078f2 !important">if</span>(jsrid==shenfens||shenfens==<span style="color:#c18401 !important">"大白机器人："</span>||shenfens==sb){
            <span style="color:#999999 !important"><em>//获取以后，在客户端显示</em></span>
            messages.innerHTML+=message.data;
        }<span style="color:#4078f2 !important">else</span>{
            <span style="color:#999999 !important"><em>//不做任何操作</em></span>
        }
	}
	<span style="color:#999999 !important"><em>//获取某个用户输入的聊天内容，并发送到服务端</em></span>
	 <span style="color:#4078f2 !important">function</span> <span style="color:#50a14f !important">getMessage</span>(){
		<span style="color:#4078f2 !important">var</span> inputMessage=<span style="color:#c18401 !important">document</span>.<span style="color:#50a14f !important">getElementById</span>(<span style="color:#c18401 !important">"inputMessage"</span>).value;
		<span style="color:#999999 !important"><em>//alert(inputMessage);</em></span>
		<span style="color:#999999 !important"><em>//获取消息以后，要发送给服务端，然后广播给所有用户</em></span>
		<span style="color:#4078f2 !important">if</span>(<span style="color:#50a14f !important">typeof</span>(inputMessage)==<span style="color:#c18401 !important">'undefined'</span>){
			<span style="color:#50a14f !important">alert</span>(<span style="color:#c18401 !important">"请输入您要发送的消息！"</span>);
		}<span style="color:#4078f2 !important">else</span>{
			ws.<span style="color:#50a14f !important">send</span>(inputMessage);
			<span style="color:#999999 !important"><em>//输入框消息清空</em></span>
			inputMessage.value=<span style="color:#c18401 !important">""</span>;
		}	
	} 
	<span style="color:#999999 !important"><em>//当关闭页面或者用户退出时，会执行一个ws.close()方法</em></span>
	<span style="color:#c18401 !important">window</span>.onbeforeunload=<span style="color:#4078f2 !important">function</span>(){
		ws.<span style="color:#50a14f !important">close</span>();
	}
	<span style="color:#999999 !important"><em>//按回车发送信息</em></span>
	<span style="color:#c18401 !important">document</span>.onkeyup=<span style="color:#4078f2 !important">function</span>(e){
		<span style="color:#4078f2 !important">if</span>(e.keyCode==<span style="color:#ae81ff !important">13</span>){
			<span style="color:#50a14f !important">getMessage</span>();
			inputMessage.value=<span style="color:#c18401 !important">""</span>;
		}
	}
</script>
</code></span></span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

2，其次为后台系统客服聊天框的js代码

<span style="color:#314659"><span style="background-color:#ffffff"><code class="language-javascript language-js"><script>
        <span style="color:#4078f2 !important">var</span> name=<span style="color:#c18401 !important">""</span>;
        $(<span style="color:#4078f2 !important">function</span> () {
            $.<span style="color:#50a14f !important">post</span>(
                <span style="color:#c18401 !important">"/demo/getName"</span>,
                <span style="color:#4078f2 !important">function</span> (data) {
                    name=data.name;
                },
                <span style="color:#c18401 !important">"json"</span>
            );
 <span style="color:#999999 !important"><em>//得到未读消息并展示到列表中（当点击其中一个未读消息时会得到该消息的账号（前台用户的userId唯一标识））</em></span>
            $.<span style="color:#50a14f !important">post</span>(
                <span style="color:#c18401 !important">"/demo/getweidu"</span>,
                <span style="color:#4078f2 !important">function</span> (data) {
                    <span style="color:#4078f2 !important">var</span> temp=<span style="color:#c18401 !important">''</span>;
                    <span style="color:#4078f2 !important">var</span> count=<span style="color:#ae81ff !important">0</span>;
                    <span style="color:#4078f2 !important">var</span> account=<span style="color:#c18401 !important">''</span>;
                    <span style="color:#4078f2 !important">for</span>(<span style="color:#4078f2 !important">var</span> i=<span style="color:#ae81ff !important">0</span>;i<data.length;i++){
                        temp+=<span style="color:#c18401 !important">'<div class="yonghu" onclick="liaotian('</span>+data[i].account+<span style="color:#c18401 !important">')">\n'</span> +
                            <span style="color:#c18401 !important">'            <span id="lalala">'</span>+data[i].account+<span style="color:#c18401 !important">'</span>\n'</span> +
                            <span style="color:#c18401 !important">'            <div id="'</span>+data[i].account+<span style="color:#c18401 !important">'" class="weidu">'</span>+data[i].count+<span style="color:#c18401 !important">'</div>\n'</span> +
                            <span style="color:#c18401 !important">'        </div>'</span>;
                    }
                    $(<span style="color:#c18401 !important">"#nav"</span>).<span style="color:#50a14f !important">append</span>(temp);
                }
            );
        });

<span style="color:#999999 !important"><em>//这是点击对应的未读消息之后将未读消息展示到客服的聊天框</em></span>
        <span style="color:#4078f2 !important">var</span> sb=<span style="color:#ae81ff !important">null</span>;
        <span style="color:#4078f2 !important">function</span> <span style="color:#50a14f !important">liaotian</span>(v) {  <span style="color:#999999 !important"><em>//下面的websocket内容在这个方法里面，执行这个点击事件之后触发websocket连接</em></span>
            sb=v;
            $(<span style="color:#c18401 !important">"#content"</span>).<span style="color:#50a14f !important">empty</span>();
            $(<span style="color:#c18401 !important">"#"</span>+v).<span style="color:#50a14f !important">hide</span>();
            $.<span style="color:#50a14f !important">post</span>(
                <span style="color:#c18401 !important">"/demo/getxiaoxi"</span>,
                {<span style="color:#f74449 !important">account</span>:v},
                <span style="color:#4078f2 !important">function</span> (data) {
                    <span style="color:#999999 !important"><em>// alert(JSON.stringify(data));</em></span>
                    <span style="color:#4078f2 !important">var</span> str=<span style="color:#c18401 !important">''</span>;
                    <span style="color:#4078f2 !important">for</span>(<span style="color:#4078f2 !important">var</span> i=<span style="color:#ae81ff !important">0</span>;i<data.length;i++){
                        <span style="color:#4078f2 !important">var</span> time=data[i].addtime.<span style="color:#50a14f !important">slice</span>(<span style="color:#ae81ff !important">0</span>,<span style="color:#ae81ff !important">10</span>);
                        str+=<span style="color:#c18401 !important">' <div class="message"><span>'</span>+data[i].account+<span style="color:#c18401 !important">'</span>用户：<span>'</span>+time+<span style="color:#c18401 !important">'</span>'</span>+data[i].message+<span style="color:#c18401 !important">'</div>'</span>;
                    }
                    $(<span style="color:#c18401 !important">"#content"</span>).<span style="color:#50a14f !important">append</span>(str);
                },
                <span style="color:#c18401 !important">"json"</span>
            );
            <span style="color:#999999 !important"><em>//将点击后的未读消息改为已读消息</em></span>
            $.<span style="color:#50a14f !important">post</span>(
                <span style="color:#c18401 !important">"/demo/changeYD"</span>,
                {<span style="color:#f74449 !important">account</span>:v},
                <span style="color:#4078f2 !important">function</span> (data) {
                    <span style="color:#c18401 !important">console</span>.<span style="color:#50a14f !important">log</span>(data);
                }
            );
            <span style="color:#999999 !important"><em>//发送人id（超级管理员写死的，上面说过了）</em></span>
            <span style="color:#4078f2 !important">var</span> wsUrl=<span style="color:#c18401 !important">"ws://127.0.0.1:8082/charRoomServer"</span>;
            <span style="color:#4078f2 !important">var</span> allUrl=wsUrl+<span style="color:#c18401 !important">"/"</span>+<span style="color:#c18401 !important">"超级管理员"</span>;
            <span style="color:#999999 !important"><em>//客户端与服务端建立连接，建立连接以后，它会发出一个ws.open事件</em></span>
            <span style="color:#4078f2 !important">var</span> ws=<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">WebSocket</span>(allUrl);
            <span style="color:#999999 !important"><em>//接收人userId</em></span>
            <span style="color:#4078f2 !important">var</span> jsrid=sb;
            <span style="color:#999999 !important"><em>//连接成功后，提示浏览器客户端输入名称</em></span>
            ws.onopen=<span style="color:#4078f2 !important">function</span>(){
                ws.<span style="color:#50a14f !important">send</span>(jsrid);
            }
            <span style="color:#999999 !important"><em>//客户端收到服务端发送的消息</em></span>
            ws.onmessage=<span style="color:#4078f2 !important">function</span>(message){
                <span style="color:#999999 !important"><em>//截取到普通用户的手机号</em></span>
                <span style="color:#4078f2 !important">var</span> shenfen=<span style="color:#50a14f !important">JSON</span>.<span style="color:#50a14f !important">stringify</span>(message.data).<span style="color:#50a14f !important">toString</span>();
                <span style="color:#4078f2 !important">var</span> shenfens=shenfen.<span style="color:#50a14f !important">slice</span>(shenfen.<span style="color:#50a14f !important">lastIndexOf</span>(<span style="color:#c18401 !important">"|"</span>)+<span style="color:#ae81ff !important">1</span>,-<span style="color:#ae81ff !important">1</span>);
                 <span style="color:#c18401 !important">console</span>.<span style="color:#50a14f !important">log</span>(<span style="color:#c18401 !important">"身份："</span>+shenfens);
                <span style="color:#999999 !important"><em>// //判断发送人id是否和页面初始化时的接收人id（jsrid）是否一致，相同则说明是对方回复的消息</em></span>
                <span style="color:#4078f2 !important">if</span>(jsrid==shenfens||<span style="color:#c18401 !important">"超级管理员"</span>==shenfens){
                    <span style="color:#999999 !important"><em>//获取以后，在客户端显示</em></span>
                    content.innerHTML+=message.data;
                }<span style="color:#4078f2 !important">else</span>{
                    <span style="color:#999999 !important"><em>//不做任何操作</em></span>
                }
            }
            <span style="color:#999999 !important"><em>//获取某个用户输入的聊天内容，并发送到服务端</em></span>
            <span style="color:#4078f2 !important">function</span> <span style="color:#50a14f !important">getMessage</span>(){
                <span style="color:#4078f2 !important">var</span> inputMessage=<span style="color:#c18401 !important">document</span>.<span style="color:#50a14f !important">getElementById</span>(<span style="color:#c18401 !important">"inputMessage"</span>).value;
                <span style="color:#999999 !important"><em>//alert(inputMessage);</em></span>
                <span style="color:#999999 !important"><em>//获取消息以后，要发送给服务端，然后广播给所有用户</em></span>
                <span style="color:#4078f2 !important">if</span>(<span style="color:#50a14f !important">typeof</span>(inputMessage)==<span style="color:#c18401 !important">'undefined'</span>){
                    <span style="color:#50a14f !important">alert</span>(<span style="color:#c18401 !important">"请输入您要发送的消息！"</span>);
                }<span style="color:#4078f2 !important">else</span>{
                    ws.<span style="color:#50a14f !important">send</span>(inputMessage);
                    <span style="color:#999999 !important"><em>//输入框消息清空</em></span>
                    inputMessage.value=<span style="color:#c18401 !important">""</span>;
                }
            }
            <span style="color:#999999 !important"><em>//当关闭页面或者用户退出时，会执行一个ws.close()方法</em></span>
             <span style="color:#c18401 !important">window</span>.onbeforeunload=<span style="color:#4078f2 !important">function</span>(){
                 ws.<span style="color:#50a14f !important">close</span>();
             }
            <span style="color:#999999 !important"><em>//按回车发送信息</em></span>
            <span style="color:#c18401 !important">document</span>.onkeyup=<span style="color:#4078f2 !important">function</span>(e){
                <span style="color:#4078f2 !important">if</span>(e.keyCode==<span style="color:#ae81ff !important">13</span>){
                    <span style="color:#50a14f !important">getMessage</span>();
                    inputMessage.value=<span style="color:#c18401 !important">""</span>;
                }
            }
        }
    </script>
</code></span></span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108

3，最后为服务端的websocket实例

<span style="color:#314659"><span style="background-color:#ffffff"><code class="language-java"><span style="color:#4078f2 !important">package</span> com.qianlong.controller;

<span style="color:#4078f2 !important">import</span> com.qianlong.service.SelectService;
<span style="color:#4078f2 !important">import</span> org.springframework.beans.factory.annotation.Autowired;
<span style="color:#4078f2 !important">import</span> org.springframework.stereotype.Component;

<span style="color:#4078f2 !important">import</span> java.io.IOException;
<span style="color:#4078f2 !important">import</span> java.text.SimpleDateFormat;
<span style="color:#4078f2 !important">import</span> java.util.Date;
<span style="color:#4078f2 !important">import</span> java.util.HashMap;
<span style="color:#4078f2 !important">import</span> java.util.Map;
<span style="color:#4078f2 !important">import</span> javax.websocket.OnClose;
<span style="color:#4078f2 !important">import</span> javax.websocket.OnMessage;
<span style="color:#4078f2 !important">import</span> javax.websocket.OnOpen;
<span style="color:#4078f2 !important">import</span> javax.websocket.Session;
<span style="color:#4078f2 !important">import</span> javax.websocket.server.PathParam;
<span style="color:#4078f2 !important">import</span> javax.websocket.server.ServerEndpoint;
<span style="color:#999999 !important"><em>/**
 * 聊天室的服务端程序
 * <span style="color:#c678dd">@author</span> Administrator
 *
 */</em></span>
<span style="color:#999999 !important"><em>//声明websocket某个服务端的地址</em></span>
<span style="color:#fd971f !important">@ServerEndpoint(value = "/charRoomServer/{param}")</span>
<span style="color:#fd971f !important">@Component</span>
<span style="color:#4078f2 !important">public</span> <span style="color:#4078f2 !important">class</span> <span style="color:#50a14f !important">ChatRoomServer</span> {
    <span style="color:#fd971f !important">@Autowired</span>
    <span style="color:#4078f2 !important">public</span> <span style="color:#4078f2 !important">static</span> SelectService selectService;
    <span style="color:#4078f2 !important">private</span> <span style="color:#c18401 !important">boolean</span> firstFlag=<span style="color:#ae81ff !important">true</span>;
    <span style="color:#4078f2 !important">private</span> Session session;
    <span style="color:#4078f2 !important">private</span> String userName;

    <span style="color:#999999 !important"><em>//发送人id</em></span>
    <span style="color:#4078f2 !important">private</span> String userId;
    <span style="color:#999999 !important"><em>//key代表此次客户端的userId，value代表此次连接对象</em></span>
    <span style="color:#4078f2 !important">private</span> <span style="color:#4078f2 !important">static</span> <span style="color:#4078f2 !important">final</span> HashMap<String, Object> connectMap=<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">HashMap</span><String, Object>();
    <span style="color:#999999 !important"><em>//保存所有用户昵称信息</em></span>
    <span style="color:#999999 !important"><em>//key是session的id，value是用户昵称</em></span>
    <span style="color:#4078f2 !important">private</span> <span style="color:#4078f2 !important">static</span> <span style="color:#4078f2 !important">final</span> HashMap<String, String> userMap=<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">HashMap</span><String, String>();
    <span style="color:#999999 !important"><em>//服务端收到客户端的连接请求，连接成功后会执行此方法</em></span>
    <span style="color:#fd971f !important">@OnOpen</span>
    <span style="color:#4078f2 !important">public</span> <span style="color:#4078f2 !important">void</span> <span style="color:#50a14f !important">start</span>(<span style="color:#fd971f !important">@PathParam(value = "param")</span> String param, Session session) {
        <span style="color:#50a14f !important">this</span>.session=session;
        <span style="color:#50a14f !important">this</span>.userId=param; <span style="color:#999999 !important"><em>//接收参数</em></span>
        connectMap.put(param,<span style="color:#50a14f !important">this</span>);
    }

    <span style="color:#999999 !important"><em>//客户端发来的信息，服务端接收</em></span>
    <span style="color:#fd971f !important">@OnMessage</span>              <span style="color:#999999 !important"><em>//接收人userId</em></span>
    <span style="color:#4078f2 !important">public</span> <span style="color:#4078f2 !important">void</span> <span style="color:#50a14f !important">chat</span>(String clientMessage,Session session) {
        <span style="color:#999999 !important"><em>//firstFlag为true是第一次进入，第二次进入之后设为false</em></span>
        ChatRoomServer client=<span style="color:#ae81ff !important">null</span>;
        <span style="color:#4078f2 !important">if</span>(firstFlag) {
            <span style="color:#50a14f !important">this</span>.userName=clientMessage;
            <span style="color:#999999 !important"><em>//将新进来的用户保存到用户map</em></span>
            userMap.put(session.getId(), userName);

            <span style="color:#4078f2 !important">try</span> {
               <span style="color:#4078f2 !important">if</span>(<span style="color:#c18401 !important">"超级管理员"</span>.equals(userId)){

               }<span style="color:#4078f2 !important">else</span>{
                   <span style="color:#999999 !important"><em>//构造发送给客户端的提示信息</em></span>
                   String message=htmlMessage(<span style="color:#c18401 !important">"大白机器人："</span>,<span style="color:#c18401 !important">"亲爱的"</span>+userId+<span style="color:#c18401 !important">"，您想了解点儿啥？"</span>);
                   client=(ChatRoomServer) connectMap.get(userId);
                   <span style="color:#999999 !important"><em>//给对应的web端发送一个文本信息</em></span>
                   client.session.getBasicRemote().sendText(message);
               }
            } <span style="color:#4078f2 !important">catch</span> (IOException e) {
                e.printStackTrace();
            }
            firstFlag=<span style="color:#ae81ff !important">false</span>;
        }<span style="color:#4078f2 !important">else</span> {
            System.err.println(<span style="color:#c18401 !important">"clientMessage:"</span>+userName);
            <span style="color:#999999 !important"><em>//给对方发消息</em></span>
            String message1=htmlMessage(userId,clientMessage);
            client  = (ChatRoomServer) connectMap.get(userName);
           <span style="color:#4078f2 !important">if</span>(client!=<span style="color:#ae81ff !important">null</span>){
               <span style="color:#4078f2 !important">try</span> {
                   client.session.getBasicRemote().sendText(message1);
               } <span style="color:#4078f2 !important">catch</span> (IOException e) {
                   e.printStackTrace();
               }
           }
            <span style="color:#999999 !important"><em>//给自己窗口发消息</em></span>
            String message2=htmlMessage(userId,clientMessage);
            client  = (ChatRoomServer) connectMap.get(userId);
            <span style="color:#4078f2 !important">try</span> {
                client.session.getBasicRemote().sendText(message2);
            } <span style="color:#4078f2 !important">catch</span> (IOException e) {
                e.printStackTrace();
            }
           
            <span style="color:#999999 !important"><em>//这是将前台用户发送的消息存数据库并标记为未读，和上面通信没关系</em></span>
            <span style="color:#4078f2 !important">if</span>(<span style="color:#c18401 !important">"超级管理员"</span>.equals(userId)){

            }<span style="color:#4078f2 !important">else</span>{
                Map map=<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">HashMap</span>();
                map.put(<span style="color:#c18401 !important">"account"</span>,userId);
                map.put(<span style="color:#c18401 !important">"message"</span>,clientMessage);
                map.put(<span style="color:#c18401 !important">"addtime"</span>,<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">Date</span>());
                <span style="color:#c18401 !important">int</span> <span style="color:#c18401 !important">i</span> <span style="color:#ab5656">=</span> selectService.chatInsert(map);
                System.out.println(i);
            }
        }
        }
    
    <span style="color:#999999 !important"><em>/**
     * 前台js的ws.close事件，会触发后台的标注onClose的方法
     */</em></span>
    <span style="color:#fd971f !important">@OnClose</span>
    <span style="color:#4078f2 !important">public</span> <span style="color:#4078f2 !important">void</span> <span style="color:#50a14f !important">close</span>() {
        userMap.remove(session.getId());
        connectMap.remove(userId);
    }
    <span style="color:#999999 !important"><em>/**
     * 渲染页面，把信息构造好标签再发送
     */</em></span>
    <span style="color:#4078f2 !important">public</span> String <span style="color:#50a14f !important">htmlMessage</span>(String userName,String message) {
        StringBuffer stringBuffer=<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">StringBuffer</span>();
        SimpleDateFormat sf=<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">SimpleDateFormat</span>(<span style="color:#c18401 !important">"yyyy-MM-dd HH:mm:ss"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"<article>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"<span>"</span>+sf.format(<span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">Date</span>())+<span style="color:#c18401 !important">"</span>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"<div class='avatar'>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"<h3>"</span>+userName+<span style="color:#c18401 !important">"</h3>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"</div>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"<div class='msg'>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"<div class='tri'></div>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"<div class='msg_inner'>"</span>+message+<span style="color:#c18401 !important">"</div>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"</div>"</span>);
        stringBuffer.append(<span style="color:#c18401 !important">"</article>"</span>);
        <span style="color:#999999 !important"><em>//这里拼接了消息发送人的userId，在前台进行截取字符串接收发送人的userId</em></span>
        stringBuffer.append(<span style="color:#c18401 !important">"|"</span>+userName);
        <span style="color:#4078f2 !important">return</span> stringBuffer.toString();
    }
}
</code></span></span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136

三，依赖注入

在websocket中进行依赖注入service并调用service方法进行数据库存储，如果按常规的方式是走不通的。

解决方式：

在该springboot项目中添加一个WebsocketConfig配置类，对service进行配置。

<span style="color:#314659"><span style="background-color:#ffffff"><code class="language-java"><span style="color:#fd971f !important">@Configuration</span>
<span style="color:#4078f2 !important">public</span> <span style="color:#4078f2 !important">class</span> <span style="color:#50a14f !important">WebSocketConfig</span> {
    <span style="color:#999999 !important"><em>/**
     * ServerEndpointExporter 用于扫描和注册所有携带 ServerEndPoint 注解的实例，
     * 若部署到外部容器 则无需提供此类。
     */</em></span>
    <span style="color:#fd971f !important">@Bean</span>
    <span style="color:#4078f2 !important">public</span> ServerEndpointExporter <span style="color:#50a14f !important">serverEndpointExporter</span>() {
        <span style="color:#4078f2 !important">return</span> <span style="color:#4078f2 !important">new</span> <span style="color:#50a14f !important">ServerEndpointExporter</span>();
    }

    <span style="color:#999999 !important"><em>

    
     * 因 SpringBoot WebSocket 对每个客户端连接都会创建一个 WebSocketServer（<span style="color:#c678dd">@ServerEndpoint</span> 注解对应的对象，Bean 注入操作会被直接略过，因而手动注入一个全局变量
     */</em></span>
    <span style="color:#fd971f !important">@Autowired</span>
    <span style="color:#4078f2 !important">public</span> <span style="color:#4078f2 !important">void</span> <span style="color:#50a14f !important">setSelectService</span>(SelectService selectService) {
        ChatRoomServer.selectService = selectService;
    }
}
</code></span></span>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

然后在websocket中注入service。

四，效果展示

在这里插入图片描述
在这里插入图片描述

五，源码下载

php客服系统源码包下载地址：
https://yfi.lanzouj.com/iHN4A061ok5c

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/500030
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号