1、創建一個springboot工程或者ssm工程
2、加入websocket的依賴包
<!-- Spring WebSocket --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>${org.springframework.version}</version> </dependency>
3、創建socketServer.java文件用於實現對接
/** * */ package com.test.socket; import java.io.IOException; import java.util.concurrent.TimeUnit; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; import org.springframework.stereotype.Component; /** * @author lyy * * 2021年1月13日-下午4:53:51 */ @Component @ServerEndpoint(value ="/start") public class SocketServer { public Session session; //連接打開時執行 @OnOpen public void onOpen(Session session) { this.session = session; System.err.println("websocket連接成功!!!"); } //連接關閉時執行 @OnClose public void onClose(Session session) { System.err.println("斷開websocket連接!!!"); } //收到消息時執行 @OnMessage public void onMessage(String message,Session session) { System.out.println(message); for(int i=0;i<10;i++){ send("我在自動推送第"+i+"條消息消息"); try { TimeUnit.SECONDS.sleep(5); // 等待5秒 } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } /** * 發生錯誤時執行 * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { System.out.println("【websocket發生錯誤】:" + error); error.printStackTrace(); } public void send(String str){ try { session.getBasicRemote().sendText(str); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }
4、創建socketConfig.java文件
/** * */ package com.test.socket; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; /** * @author lyy * * 2021年1月13日-下午5:04:24 */ @Configuration public class ScoketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
5、創建前端html或jsp頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script> </head> <body> <h1>${test}</h1> <div> <input type="button" id="connection" value="連接" /> <input type="button" id="close" value="關閉" /> <input type="button" id="send" value="發送" /> </div> </body> <script type="text/javascript"> var socket; if(typeof(WebSocket) == "undefined") { alert("您的瀏覽器不支持WebSocket"); }else{ $("#connection").click(function() { //實現化WebSocket對象,指定要連接的服務器地址與端口 socket = new WebSocket("ws://127.0.0.1:8080/websocket/start"); //打開事件 socket.onopen = function() { alert("Socket 已打開"); }; //獲得消息事件 socket.onmessage = function(msg) { alert(msg.data); }; //關閉事件 socket.onclose = function() { alert("Socket 已關閉"); }; //發生了錯誤事件 socket.onerror = function() { alert("socket出錯"); } }); //發送消息 $("#send").click(function() { socket.send("我是客戶端!!!"); }); //關閉 $("#close").click(function() { socket.close(); }); } </script> </html>
最終結果: