一，思路梳理
1，首先思考群聊的实现方式。
每当一个用户使用websocket建立连接时，都会存放一个连接对象（在connectMap集合存放，键为sessionId，值为该连接对象），每次当用户发送一条数据时，都会遍历connectMap中所有的连接对象，然后进行广播发送消息，接收消息也是，谁的消息都收，来之不拒，所以此为群聊。
2，再来举一反三，思考单聊的实现方式。
单聊的话，要改变下面几个地方。
1，存放connectMap连接对象时，值要为userId（唯一标识）。
2，使用websocket建立连接时要把自己的userId（发送人）和对方的userId（接收人）传到后台，因为发消息时，根据userId得到连接对象，并使用连接对象发消息到对方的窗口和自己的窗口。
3，在js获取消息的地方要判断该消息的发送人userId是否和初始化时的接收人userId一致，如果一致的话则将消息添加到自己的窗口进行显示，如果不一致则不显示。
有一个地方需要提一下，比如要给A用户发送消息，就要根据A的userId得到连接对象，然后就会把消息发送给A用户。演示：ym.fzapp.top
二，代码分析
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>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>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>三，依赖注入
在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>然后在websocket中注入service。
四，效果展示
进到聊天框中（左下角的用户名忽略，因为上面通过截取字符串得到的发送人userId，所以这里多了一个userId）
登录之后会提示未读消息的信息。
点击客服管理，进入客服聊天平台，并显示消息未读数。
这是给123456用户发送的消息，其他用户也是收不到的。
查看123456用户的聊天框内容，可以收到客服的消息，然后该用户可以和客服实现在线单聊。
本次websocket讲解到此结束，谢谢观赏！
