1.通过https://start.aliyun.com创建一个spring boot项目

https://start.aliyun.com

所需依赖：

2.编写代码

package com.example.mywbsk.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;//监控用户页面
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {//注册两个客户端资源名和路径 代表张三和李四分别登录了聊天页面@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/zs").setViewName("zs");registry.addViewController("/ls").setViewName("ls");}
}

WebSocketConfig，WebSocket核心存放在spring容器中：

package com.example.mywbsk.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;//WebSocket核心 存放在spring容器中
@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}
}

controller，管理员功能：

package com.example.mywbsk.controller;import com.example.mywbssk.services.WebSocketServer;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;
import java.io.IOException;@RestController
public class controller {@Resourceprivate WebSocketServer webSocketServer;//服务器给某人发送信息@RequestMapping(value = "/socket",method = RequestMethod.GET)public void singleSocket(@RequestParam("name")String name,@RequestParam("msg")String msg){webSocketServer.sendInfo(name,msg);}//服务器向群体发送信息@RequestMapping(value = "/socket/all",method = RequestMethod.GET)public void collectiveSocket(@RequestParam("msg")String msg){try {webSocketServer.onMessage(msg);} catch (IOException e) {e.printStackTrace();}}
}

WebSocketServer，websocket服务器：

package com.example.mywbsk.services;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.atomic.AtomicInteger;//websocket服务器
@Component
@ServerEndpoint("/socket/{name}")
public class WebSocketServer {//原子类 在多线程情况 原子类会自动上锁 记录在线人数private static AtomicInteger online = new AtomicInteger();//存放每个客户端对当前服务器WebSocket会话对象private static Map<String, Session> sessionMap = new HashMap<>();//从服务器给某个Session发送数据 此方法名固定public void sendMessage(Session session,String msg) throws IOException{if (session!=null){session.getBasicRemote().sendText(msg);}}//用户和服务器建立连接@OnOpenpublic void onOpen(Session session, @PathParam(value = "name")String userName){//向session集合中添加一个用户sessionsessionMap.put(userName,session);//在线人数+1addOnline();System.out.println(userName+"加入服务器！当前在线人数："+online);try {//发送一段信息给登录的用户sendMessage(session,userName+"，欢迎加入聊天室！！！");} catch (IOException e) {e.printStackTrace();}}//用户退出关闭连接@OnClosepublic void onClose(@PathParam(value = "name")String userName){//移除一个SessionsessionMap.remove(userName);//在线人数-1subOnline();System.out.println(userName+"断开服务器连接！当前人数："+online);}//向所用的Session对象发送信息@OnMessagepublic void onMessage(String msg) throws IOException{for (Session session:sessionMap.values()){sendMessage(session,msg);}}@OnErrorpublic void onError(Session session,Throwable throwable){System.out.println("发生错误！！！");throwable.printStackTrace();}//指定向某人发信息public void sendInfo(String name,String msg){Session session = sessionMap.get(name);try {sendMessage(session,msg);} catch (IOException e) {e.printStackTrace();}}//对在线人数的操作 增加public static void addOnline(){online.incrementAndGet();}//对在线人数的操作 减少public static void subOnline(){online.decrementAndGet();}
}

application.yml：

# 应用名称
spring:application:name: mywbsk
# 应用服务 WEB 访问端口
server:port: 9900

ls.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="text">
<button onclick="collctive()">发送</button>
<button onclick="exitTalk()">关闭</button>
<br>
<div id="message"></div>
<script type="text/javascript">var webSocket = null;if ('WebSocket' in window){webSocket=new WebSocket("ws://localhost:9900/socket/ls")}else {alert("当前浏览器不支持HTML5的WebSocket！！！")}//在div中写信息的方法function setMsg(msg) {document.getElementById("message").innerHTML+=msg+"<br/>";}//前端websocket错误处理webSocket.onerror = function () {setMsg("连接服务器错误！！！");}//开启websocket服务器连接时获取后端服务器返回的数据webSocket.onopen = function () {setMsg("登录成功！！！");}//接受服务器群发或单发的数据webSocket.onmessage = function (event) {setMsg(event.data);}//用户点击按钮后接到服务器的信息webSocket.onclose = function () {setMsg("BYE BYE！！！");}//用户直接关闭浏览器window.onbeforeunload=function () {webSocket.close();}//用户发送信息到群里function collctive() {//获取文本框的值var msg = document.getElementById("text").value;//发送服务器webSocket.send(msg);}//用户点击按钮退出聊天室function exitTalk() {webSocket.close();}
</script>
</body>
</html>

zs.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="text">
<button onclick="collctive()">发送</button>
<button onclick="exitTalk()">关闭</button>
<br>
<div id="message"></div>
<script type="text/javascript">var webSocket = null;if ('WebSocket' in window){webSocket=new WebSocket("ws://localhost:9900/socket/zs")}else {alert("当前浏览器不支持HTML5的WebSocket！！！")}//在div中写信息的方法function setMsg(msg) {document.getElementById("message").innerHTML+=msg+"<br/>";}//前端websocket错误处理webSocket.onerror = function () {setMsg("连接服务器错误！！！");}//开启websocket服务器连接时获取后端服务器返回的数据webSocket.onopen = function () {setMsg("登录成功！！！");}//接受服务器群发或单发的数据webSocket.onmessage = function (event) {setMsg(event.data);}//用户点击按钮后接到服务器的信息webSocket.onclose = function () {setMsg("BYE BYE！！！");}//用户直接关闭浏览器window.onbeforeunload=function () {webSocket.close();}//用户发送信息到群里function collctive() {//获取文本框的值var msg = document.getElementById("text").value;//发送服务器webSocket.send(msg);}//用户点击按钮退出聊天室function exitTalk() {webSocket.close();}
</script>
</body>
</html>