html5客服系统源码（客服系统源码）
-
-
类目：知识大全
-
联系人：
-
微信号：
-
Q Q 号：
-
手机号：
-
浏览量：
348
【商户信息】
【货源详情】
h5效果图
h5页面聊天
vue效果图
vue页面聊天
功能实现
spring boot webSocket实现
官方地址https://docs.spring.io/spring-framework/docs/5.0.8.release/spring-freference/web.html #
maven配置文件
从属权利
依存
groupid org.spring framework.boot/groupid
artifactidspring-boot-starter-thyme leaf/artifact id
/dependency
依存
groupIdcom.alibaba/groupId
artifactIdfastjson/artifactId
版本1.2.78 /版本
/dependency
依存
groupid org.spring framework.boot/groupid
artifactidspring-boot-starter-web/artifact id
/dependency
依存
groupid org.spring framework.boot/groupid
artifactidspring-boot-starter-web socket/artifact标识
/dependency
依存
groupid org.project lombok/groupid
身份验证/身份验证id
选项真/选项
/dependency
依存
groupid org.spring framework.boot/groupid
artifactidspring-boot-starter-test/artifact标识
scopetest/scope
/dependency
/dependencies
web套接字配置
package com.example.web chat.config；
importorg.spring framework.context.annotation.bean；
importorg.spring framework.context.annotation.configuration；
importorg.spring framework.web.socket.web sockethandler；
importorg.spring framework.web.socket.config.annotation.enablewebsocket；
importorg.spring framework.web.socket.config.annotation.websocketconfigurer；
importorg.spring framework.web.socket.config.annotation.websockethandlerregistry；
importorg.spring framework.web.socket.server.standard.servletservercontainerfactorybean；
@Configuration
@EnableWebSocket
publicclasswebsocketconfigimplementswebsocketconfigurer {
@Override
publicvoidregisterwebsockethandlers (websockethandlerregistryregistry ) {
registry.addhandler(myhandler )、' myHandler/访问路径
. add interceptors (配置newwebsockethandlerinterceptor ()//拦截器
. setallowedorigins('* '； //跨域
}
@Bean
publicservletservercontainerfactorybeancreatewebsocketcontainer () {
servletservercontainerfactorybeancontainer=newservletservercontainerfactorybean (；
container.setmaxtextmessagebuffersize (8192； //例如消息缓冲区大小、空闲超时等
container.setmaxbinarymessagebuffersize (8192；
返回容器；
}
@Bean
publicwebsockethandlermyhandler (
return new MyHandler (；
}
}
信息处理系统
package com.example.web chat.config；
import com.Alibaba.fast JSON.JSON；
import com.Alibaba.fast JSON.JSON object；
import com.example.web chat.POJO.data VO；
importorg.spring framework.web.socket.closestatus；
importorg.spring framework.web.socket.text message；
importorg.spring framework.web.socket.websocketsession；
importorg.spring framework.web.socket.handler.abstractwebsockethandler；
import java.io.IOException；
import java.util.*；
import Java.util.concurrent.concurrent hashmap；
publicclassmyhandlerextendsabstractwebsockethandler {
private static int onlineCount=0；
//线程安全
private static MapString，websocketsessionusermap=newconcurrenthashmap (； //用户
private static MapString，websocketsessionadminmap=newconcurrenthashmap (； //客户
@Override
publicvoidafterconnectionestablished (websocketsessionsession ) throws IOException {。
添加在线计数(； //对当前用户加1
system.out.println (session.getid )；
MapString，object map=session.get attributes (；
objecttoken=map.get('token )；
objectadmin=map.get(admin )；
DataVo dataVo=new DataVo (；
datavo.setcode(9001 ).setMsg ("连接成功" )；
if(objects.nonnull(admin ) ) }
管理映射. put (session.getid )、session )； //添加呼叫
} else {
//分配客户
usermap.put(session.getid )、session )； //添加当前用户
分散(data VO )；
}
ATAVO.setid(session.getid ) )；
System.out.println ('用户连接成功：' admin )；
System.out.println ('用户连接成功：' token )；
System.out.println (在线用户： ) getonlinecount ) )；
this.sendmsg(session，JSONobject.tojsonstring ) dataVO )；
}
privatevoiddistribution(dataVO ) {
管理地图. size (if )！=0}{
Random random=new Random (；
intx=random.nextint (admin map.size )；
setstring values=admin map.keyset (；
int j=0；
for(stringstr3360values ) {
if(j==x ) {
VO.setrecid(str；
System.out.println (分配id: ) str；
黑；
}
j；
}
}
}
@Override
protectedvoidhandletextmessage (websocketsessionsession，文本消息) throws Exception { ) )。
System.out.print ('用户ID:' session.getId ) )；
string payload=message.get payload (；
System.out.println ('接收的数据：' payload )；
datavodatavo=JSON.tojavaobject (JSON.parse object (payload )，DataVo.class )； //json转弯对象
objects.is null (data VO.getrecid (|data VO.getrecid ).equals ) /为用户支持为空分配回调
websocketsessionsocketsession=管理映射. get (session.getid () )；
对象. is空值(socketsession ) )。
this.distribution(dataVO；
}
}
data VO.getcode (==9002 ) {
if (objects.nonnull (data VO.getrecid () ) { //user - admin
websocketsessionsocketsession=admin map.get (data VO.getrecid () )；
dataVO.setselfid(session.getid () ) ).setRecId ) ')；
this.sendmsg(socketsession，JSONobject.tojsonstring ) dataVO )；
}elseif(objects.nonnull ) dataVO.getselfid ) ) ({ //admin -user
websocketsessionsocketsession=user map.get (data VO.getselfid () )；
dataVO.setrecid(session.getid () ) ).setSelfId ) ')；
this.sendmsg(socketsession，JSONobject.tojsonstring ) dataVO )；
}
}
}
privatevoidsendmsg (websocketsession，String msg ) throws IOException {
session.sendmessage (new text message ) msg )；
}
@Override
公共连接状态(websocketsessionsession，CloseStatus status ) {
subOnlineCount (； //对当前用户加1
adminmap.remove(session.getid )；
usermap.remove(session.getid ) )；
System.out.println ('用户断开连接token:' session.getId ) )；
System.out.println ('用户为admin:' session.getId ) )；
System.out.println (在线用户： ) getonlinecount ) )；
}
publicstaticsynchronizedintgetonlinecount {
返回在线计数；
}
publicstaticsynchronizedvoidaddonlinecount {
MyHandler.onlineCount；
}
publicstaticsynchronizedvoidsubonlinecount (
myhandler.onlinecount----；
}
}
配置窃听器
package com.example.web chat.config；
importorg.spring framework.http.server.server http request；
importorg.spring framework.http.server.server httpresponse；
importorg.spring framework.http.server.servletserverhttprequest；
importorg.spring framework.web.socket.web sockethandler；
importorg.spring framework.web.socket.server.support.httpsessionhandshakeinterceptor；
import javax.servlet.http.http servlet request；
import java.util.Map；
import java.util.Objects；
publicclasswebsockethandlerinterceptorextendshttpsessionhandshakeinterceptor {
@Override
publicbooleanbeforehandshake (serverhttprequestrequest，ServerHttpResponse response，WebSocketHandler wsHandler，MapString，映射)
servletserverhttprequestservletrequest=(servletserverhttprequest ) request；
httpservletrequestre=servlet request.getservletrequest ()
object token=re.getparameter (' token )；
object admin=re.getparameter (admin )；
objects.is null (token ) ) ) )。
返回假；
}
re.getSession ().setattribute ()，admin )；
re.getSession ().setattribute )、token )；
return super.before handshake (request，response，wsHandler，attributes )；
}
@Override
publicvoidafterhandshake (serverhttprequestrequest，ServerHttpResponse response，WebSocketHandler wsHandler，Exception ex ) {
super.afterHandshake(request，response，wsHandler，ex )；
}
}
h5服务器端
！ DOCTYPE html
html
头儿
meta charset='utf-8 '
title服务器端/title
style type='text/css '
#client {
边距： 0px自动；
width: 500px；
}
input {
width: 80%；
height: 40px；
border-radius: 5px；
border-color: #CCCCCC；
outline: #01FA01；
}
#button {
width: 84px；
height: 46px；
background-color: #5af3a5；
color: #fff；
字体大小： 20px；
border-radius: 5px；
border: none；
box-shadow : 1px 1px 1px 1px # CCC；
cursor: pointer；
outline: #01FA01；
}
/style
/head
身体
div id='客户端'
h1 style='文本对齐中心；' 发送服务器端消息/h1
divid=' content ' content editable=true
style='width: 500px； height: 500px； 边距： 0px自动； border: 1px solid #000000； padding: 10px； border-radius: 10px； overflow :自动；'
/div
div style='padding: 5px； 0px '
input type=' ' value=' '/button id=' button ' type=' button '发送/button
/div
/div
script src=' http://code.jquery.com/jquery-2.1.1.min.js '/script
script type='text/javascript '
$ () ) ) ) ) )。
var pushData={
代码： 9002，
msg: '，
自我id : '，
(；
var time=null；
varpath=' ws ://127.0.0.1:8009/myhandler/'；
类型of (web socket )==='undefined ' ) }
alert ('不支持web套接字。
返回；
}
let id=Math.random (； //随机数
//实例化套接字
varwebsocket=newwebsocket(path )？ token=' id 'admin=1'；
//监听连接
websocket.onopen=function{
console.log(Event；
间隔(；
(；
//监听消息
Websocket.onmessage=function{
letdata=JSON.parse(event.data；
pushData.selfId=data.selfId；
if(data.code==9002
$('#content ' ).append (
` p style='文本对齐： right；' span style='color:chocolate；' ${data.msg}/span :客户端/p `
）
}elseif(data.code==9001 ) ) )。
$('#content ' ).append (p style=' color : # a 09 b9b； 文本校准中心；' 连接成功/p `；
}
console.log(Event ) )。
(；
//拦截错误
websocket.onerror=function{
console.log(Event ) )。
$('#content ' ).append (p style=' color : # a 09 b9b； 文本校准中心；' 连接错误/p `；
clearInterval (；
(；
//发送信息
$('#button ' ).click () ) ) ) ) ) ) ) )。
letv=$(input ) ).val )；
if(v ) (
推式数据. code=9002；
pushData.msg=v；
websocket.send(JSON.Stringify ) pushdata )；
$('#content ' ).append (
` p服务器端： span style=' color : blue violet；' ${v}/span/p `
）
$(input ) (.val ) )；
}
() )
函数间隔
time=setInterval (() ) )。
推式数据. code=9003；
pushData.msg='心跳'；
websocket.send(JSON.Stringify ) pushdata )；
(，5000 )；
}
函数清除
clearinterval (时间；
}
() )
/脚本
/body
/html
客户端
！ DOCTYPE html
html
头儿
meta charset='utf-8 '
title客户端/title
style type='text/css '
#client {
边距： 0px自动；
width: 500px；
}
input {
width: 80%；
height: 40px；
border-radius: 5px；
border-color: #CCCCCC；
outline: #01FA01；
}
#button {
width: 84px；
height: 46px；
background-color: #5af3a5；
color: #fff；
字体大小： 20px；
border-radius: 5px；
border: none；
box-shadow : 1px 1px 1px 1px # CCC；
cursor: pointer；
outline: #01FA01；
}
/style
/head
身体
div id='客户端'
h1 style='文本对齐中心；' 客户端发送消息/h1
divid=' content ' content editable=true
style='width: 500px； height: 500px； 边距： 0px自动； border: 1px solid #000000； padding: 10px； border-radius: 10px； overflow :自动；'
/div
div style='padding: 5px； 0px '
input type=' ' value=' '/button id=' button ' type=' button '发送/button
/div
/div
script src=' http://code.jquery.com/jquery-2.1.1.min.js '/script
script type='text/javascript '
$ () ) ) ) ) )。
var pushData={
代码： 9002，
msg: '，
recId: '，
(；
var time=null；
varpath=' ws ://127.0.0.1:8009/myhandler/'；
类型of (web socket )==='undefined ' ) }
alert ('不支持web套接字。
返回；
}
let id=Math.random (； //随机数
//实例化套接字
varwebsocket=newwebsocket(path )？ token=' id；
//监听连接
websocket.onopen=function{
console.log(Event；
间隔(；
(；
//监听消息
Websocket.onmessage=function{
letdata=JSON.parse(event.data；
if(data.code==9002
$('#content ' ).append (
` p style='文本对齐： right；' span style='color:chocolate；' ${data.msg}/span :服务器端/p `
）
}elseif(data.code==9001 ) ) )。
$('#content ' ).append (p style=' color : # a 09 b9b； 文本校准中心；' 连接成功/p `；
}
console.log(Event ) )。
(；
//拦截错误
websocket.onerror=function{
console.log(Event ) )。
$('#content ' ).append (p style=' color : # a 09 b9b； 文本校准中心；' 连接错误/p `；
clearInterval (；
(；
//发送信息
$('#button ' ).click () ) ) ) ) ) ) ) )。
letv=$(input ) ).val )；
if(v ) (
推式数据. code=9002；
pushData.msg=v；
websocket.send(JSON.Stringify ) pushdata )；
$('#content ' ).append (
` p客户端： span style=' color : blue violet；' ${v}/span/p `
）
$(input ) (.val ) )；
}
() )
函数间隔
time=setInterval (() ) )。
推式数据. code=9003；
pushData.msg='心跳'；
websocket.send(JSON.Stringify ) pushdata )；
(，5000 )；
}
函数清除
clearinterval (时间；
}
() )
/脚本
/body
/html
