This is a prototype project demonstrated how to build a web socket project using Spring Boot and Vue.
In this project, there is a ticker service emitting message to the Vue client every one second. And in the Vue UI client, there is an input and button to send message back to the server and the server will log that message to the console.
Build with gradle:
> ./gradlew clean build
You can also run using spring-boot plugin:
> ./gradlew bootRun
This probject will build into a war file, you can deploy that war file into your app server,
or you can also just run that war file using
java -jar build/libs/websocket-demo-0.0.1-SNAPSHOT.war.
To build the Vue UI, make sure
npm is installed on your system and
> cd src/main/frontend > npm install && npm run build
Please refer to the UI's README file.
Then UI will be built into
src/main/resources/static. The server will host the ui static files.
Note that you don't have to build the UI, it's pre-built and included in the source.
After all builds are successful, open http://localhost:8080 in your web browser.
If you want to debug the UI, you can cd into the frontend folder and just run the dev build like this:
> cd src/main/frontend > npm run dev
Remember to run
npm install beforehand.
spring-boot-starter-websocketin your dependency.
@EnableWebSocketMessageBrokeris required, Spring's auto config won't auto-config that for you.
@MessageMappingannotation on controllers, like
@SendToannotation on controllers, like
@SendTowon't work (Not 100% sure, I'm sure it doesn't work on
SimpMessagingTemplateis required. Refer to TickService.java for more details.
Homecomponent is mounted, please refer to Home.vue for more details.
Home.vueinto a service utilizing
Promiseor a Vue plugin (Don't know how to write Vue plugin).