<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"><head><title>My first Vue app</title><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><scriptsrc="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script><scriptsrc="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><scriptth:src="@{/js/drag.js}"></script><scriptth:src="@{/js/socket.io.js}"></script><scriptth:src="@{/js/reconnecting-websocket.js}"></script><scriptth:src="@{/js/fullscreen.js}"></script></head><body><divid="app"></div><scripttype="text/javascript">var vm =newVue({
el:'#app',
data:{},
methods:{}})
window.onload=function(){var websocket =null;//判断当前浏览器是否支持WebSocketif('WebSocket'in window){var username =1;var host = window.location.host;var loc = window.location;var uri ="";if(loc.protocol ==="https:"){
uri ="wss:";}else{
uri ="ws:";}var socketUrl = uri+"//"+ host +"/login/websocket/99";
websocket =newReconnectingWebSocket(socketUrl);}else{alert("当前浏览器 Not support websocket");}//连接发生错误的回调方法
websocket.onerror=function(){
console.log("连接错误");};//连接成功建立的回调方法
websocket.onopen=function(){
console.log("Socket 已打开");
websocket.send("true");}//接收到消息的回调方法
websocket.onmessage=function(event){alert(event.data);}//连接关闭的回调方法
websocket.onclose=function(){
console.log("连接关闭");}//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload=function(){closeWebSocket();}//关闭WebSocket连接functioncloseWebSocket(){
websocket.close();}}</script></body></html>
后台基于springboot
xml文件
<?xml version="1.0" encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.springboot</groupId><artifactId>Spring-Boot-Thymeleaf</artifactId><version>0.0.1-SNAPSHOT</version><packaging>jar</packaging><name>demo</name><description>Demo project for Spring Boot</description><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.9.RELEASE</version><relativePath/><!-- lookup parent from repository --></parent><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.7</java.version><thymeleaf.version>3.0.2.RELEASE</thymeleaf.version><thymeleaf-layout-dialect.version>2.0.1</thymeleaf-layout-dialect.version></properties><dependencies><!-- WebSocket相关包 --><dependency><groupId>javax.websocket</groupId><artifactId>javax.websocket-api</artifactId><version>1.0</version><scope>provided</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-websocket</artifactId><version>4.1.4.RELEASE</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>com.vaadin.external.google</groupId><artifactId>android-json</artifactId><version>0.0.20131108.vaadin1</version><scope>compile</scope></dependency><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.2.3</version><classifier>jdk15</classifier></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>