该示例的工程代码我已经上传到CSDN资源网站，下载地址是：
https://download.csdn.net/download/look4liming/10957504
1、首先建一个空的Spring Boot项目
2、在pom.xml中添加如下依赖：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency>3、新增一个Configuration类
注意，这个类必须有，否则Websocket服务类的注解配置无法生效。
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; /** * 必须有此类，否则Websocket配置不生效（原因尚未查清）。 * @author Bright Lee */ @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }4、新增Websocket服务类
import java.io.IOException; 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; @ServerEndpoint(value = "/websocket") @Component public class WebSocketServer { private Session session; @OnOpen public void onOpen(Session session) { this.session = session; try { sendMessage("连接成功！！！"); } catch (IOException e) { e.printStackTrace(); } } @OnClose public void onClose() { } @OnMessage public void onMessage(String message, Session session) { try { sendMessage("您发送的消息是--->" + message); } catch (IOException e) { e.printStackTrace(); } } @OnError public void onError(Session session, Throwable error) { error.printStackTrace(); } public void sendMessage(String message) throws IOException { session.getBasicRemote().sendText(message); } }5、新增index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Websocket客户端</title> <script> var websocket = null; var content = null; function init() { content = document.getElementById("content"); } function printToScreen(message) { var pElement = document.createElement("p"); pElement.innerHTML = message; content.appendChild(pElement); } function connect() { if (websocket != null) { return; } var url = "ws://127.0.0.1:8080/websocket"; printToScreen("开始连接：" + url); websocket = new WebSocket(url); websocket.onopen = function(event) { printToScreen("连接成功！"); } websocket.onmessage = function(event) { printToScreen("收到消息：" + event.data); } websocket.onerror = function(event) { printToScreen("出现错误：" + event.data); closeWebsocket(); } } function sendMessage() { if (websocket == null) { return; } websocket.send(messageInput.value); printToScreen("发送消息：" + messageInput.value); } function closeWebsocket() { if (websocket == null) { return; } websocket.close(); websocket = null; printToScreen("已关闭！"); } </script> </head> <body onload="init();"> <div style="text-align: left;"> <form action=""> <input type="text" id="messageInput" value="你好！！！"> <input type="button" onclick="connect();" value="连接"> <input type="button" onclick="sendMessage();" value="发送"> <input type="button" onclick="closeWebsocket();" value="关闭"> <br /> </form> </div> <div id="content"></div> </body> </html>6、启动Spring Boot项目，访问index.html
在浏览器中输入：http://127.0.0.1:8080/index.html
青蛙客服系统：https://download.csdn.net/download/look4liming/93326820
