Springboot 整合Websocket 註解開發之第一步瀏覽器和伺服器建立連線（解決了建立連線時404錯誤！！！！）
阿新 • • 發佈：2019-01-03
1、建立一個springboot專案 勾選web和websocket選項
建立完成後build.gradle檔案如下，主要是依賴得新增上（另外說明以下compile('org.springframework.boot:spring-boot-starter-web')可以不必要新增，新增compile('org.springframework.boot:spring-boot-starter-websocket')就預設也引入了）
buildscript { ext { springBootVersion = '2.0.4.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") } } apply plugin: 'java' apply plugin: 'eclipse' apply plugin: 'org.springframework.boot' apply plugin: 'io.spring.dependency-management' group = 'com.yu.test' version = '0.0.1-SNAPSHOT' sourceCompatibility = 1.8 repositories { mavenCentral() } dependencies { compile('org.springframework.boot:spring-boot-starter-web') compile('org.springframework.boot:spring-boot-starter-websocket') testCompile('org.springframework.boot:spring-boot-starter-test') }
2、編寫客戶端
2.1、建立WebSocketConfig類，在WebSocketConfig類中註冊ServerEndpointExporter bean,這個bean會自動註冊使用了@ServerEndpoint註解宣告的物件（@ServerEndpoint註解宣告的物件用來監聽瀏覽器發來的訊息）
注意：這個類必須有，不然在瀏覽器和伺服器建立連線時總會報404錯誤！！！！！！
package com.yu.test.websoketconfig; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; /** * Created with Yang Xiaolei * Date: 2018/8/27 * Time: 15:36 */ @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
2.2、建立@ServerEndpoint註解宣告的類WebsocketEndpoint(先將連線建立成功是瀏覽器和伺服器建立聯絡，推送訊息以後再說)
package com.yu.test.websocketendpoint; import org.springframework.stereotype.Component; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.util.HashMap; import java.util.Map; /** * Created with Yang Xiaolei * Date: 2018/8/27 * Time: 10:35 */ @ServerEndpoint("/webs/{name}") @Component public class WebsocketEndpoint { public static Map<String,Object> onlineUsers = new HashMap<>(); @OnOpen public void onOpen(@PathParam("name")String name, Session session){ System.out.println("=============連結建立成功！=============="); onlineUsers.put(name,this); } }
3、建立html頁面
3.1建立index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>connection</title>
<script type="text/javascript">
alert("hellow");
</script>
<script type="text/javascript" src="js/webs.js"></script>
</head>
<body>
name:<input type="text" id="name">
<input type="button" id="myButton" value="連結" onclick="connect()">
</body>
</html>3.2建立weds.js
connect = function(){
debugger;
var websocket = null;
var userName = document.getElementById("name").value;
if("WebSocket" in window){
/*websocket = new WebSocket("ws://localhost:8080/webs/"+userName);*/
websocket = new WebSocket("ws://"+window.location.host+"/webs/"+userName);
}else{
alert("瀏覽器不支援！")
}
}4、啟動服務測試連線是否成功