1.导入jar
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
2.添加bean,使用注解
@Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); }
3.使用websocket后台配置
/** * @Auther: eros * @Date: 2019/2/27 09:41 * @Description: * 虽然@Component默认是单例模式的 * ,但springboot还是会为每个websocket连接初始化一个bean。 * 它的功能主要是将目前的类定义成 * 一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址。 */ @Component @ServerEndpoint("/ws/client/{ip}") public class ChatRoomServerEndpoint { private static final Logger LOGGER = LoggerFactory.getLogger(ChatRoomServerEndpoint.class); /** * @auther: eros * @description 存活的session集合 */ private static Map<String,ChatRoomServerEndpoint> sessionMap= new ConcurrentHashMap<String,ChatRoomServerEndpoint>(); // 某个客户端的连接会话,需要通过它来给客户端发送信息 private Session session; // 客户端的IP地址 private String ip; /** * @auther: eros * @param session 与客户端的websocket连接会话 * @param ip websocket支持路径参数 * @date: 2019/2/27 9:50 * @description 建立连接的回调方法,与前台onOpen相对应 * @return: void */ @OnOpen public void onOpen(Session session, @PathParam("ip") String ip){ LOGGER.info("》》》》》》》》》》》》》》》》》》》》》》》 "); LOGGER.info("ip - {} 开启session",ip); this.session = session; this.ip = ip; sessionMap.put(ip,this); // todo 发送请求获取页面数据 } /** * @auther: eros * @param message 客户端传来的信息 * @param session 对应的session * @param ip 3 * @date: 2019/2/27 9:58 * @description 收到客户信息的回调方法 * @return: void */ @OnMessage public void onMessage(String message,Session session,@PathParam("ip") String ip){ LOGGER.info("ip - {} 接收到信息 {}",this.ip,message); // todo 客户端传来什么信息暂时不知,先放着 } /** * @auther: eros * @param session * @param error 错误 * @date: 2019/2/27 10:01 * @description * @return: void */ @OnError public void onError(Session session,Throwable error,@PathParam("ip") String ip){ LOGGER.info("ip - {} webSocket调用出错",ip); // todo 出错后如何处理 error.printStackTrace(); } /** * @auther: eros * @param session 1 * @param ip 2 * @date: 2019/2/27 10:04 * @description 关闭连接,与前台的onClose相对应 * @return: void */ @OnClose public void onClose(Session session,@PathParam("ip") String ip){ sessionMap.remove(ip); // todo 退出需要去补充什么 LOGGER.info("ip - {} 关闭session",ip); LOGGER.info("《《《《《《《《《《《《《《《《《《《《《《《 "); } public static Map<String, ChatRoomServerEndpoint> getSessionMap() { return sessionMap; } public Session getSession() { return session; } public String getIp() { return ip; } }
4.配套controller进行页面跳转
/** * @Auther: eros * @Date: 2019/2/27 11:24 * @Description: */ @Controller @RequestMapping("/websocket") public class WebSocketController { @RequestMapping public String webSocket(){ return "/websocket/safetyChart.html"; } }
5.页面js
var webSocket = null; // todo ip是动态的 ip = "127.0.0.1"; if ('WebSocket' in window) { webSocket = new WebSocket("ws://localhost:8089/ws/client/" + ip); }else if ('MozWebSocket' in window) { webSocket = new MozWebSocket("ws://localhost:8089/ws/client/" + ip); }else { websocket = new SockJS("http://localhost:8089/ws/client/" + ip); } //打开socket,握手 webSocket.onopen = function (event) { alert("websocket已经连接"); }; //接收推送的消息 webSocket.onmessage = function (event) { console.info(event); alert(event.data); }; //错误时 webSocket.onerror = function (event) { console.info("发生错误"); alert("websocket发生错误" + event); }; //关闭连接 webSocket.onclose = function () { console.info("关闭连接"); }; //监听窗口关闭 window.onbeforeunload = function (event) { webSocket.close(); };