Book Image

Building Applications with Spring 5 and Vue.js 2

By : James J. Ye
Book Image

Building Applications with Spring 5 and Vue.js 2

By: James J. Ye

Overview of this book

Building Applications with Spring 5 and Vue.js 2, with its practical approach, helps you become a full-stack web developer. As well as knowing how to write frontend and backend code, a developer has to tackle all problems encountered in the application development life cycle – starting from the simple idea of an application, to the UI and technical designs, and all the way to implementation, testing, production deployment, and monitoring. With the help of this book, you'll get to grips with Spring 5 and Vue.js 2 as you learn how to develop a web application. From the initial structuring to full deployment, you’ll be guided at every step of developing a web application from scratch with Vue.js 2 and Spring 5. You’ll learn how to create different components of your application as you progress through each chapter, followed by exploring different tools in these frameworks to expedite your development cycle. By the end of this book, you’ll have gained a complete understanding of the key design patterns and best practices that underpin professional full-stack web development.
Table of Contents (23 chapters)
Title Page
Copyright and Credits
Dedication
About Packt
Contributors
Preface
Index

Implementing real-time updates with WebSocket


There are two parts we need to build to implement real-time communication—one is the client side and the other is the server side. As mentioned earlier, we will use SockJS (http://sockjs.org) to implement the client side and Spring's WebSocket implementation on the server side.

Introduction to SockJS

Under the hood, the SockJS client will try to use the native WebSocket that the browser provides. If it is not available, it will fall back to other transport protocols, such as XHR-Streaming and  XHR-Polling. Its API is very simple to use. The following is an example of establishing a WebSocket connection with a local server at the /rt path:

let socket = new SockJS('http://localhost:8080/rt')
socket.onopen = function (event) {
  // Connection established
  console.log(socket.readyState)
}

socket.onmessage = function (message) {
  // Message received via WebSocket
}

socket.onclose = function (event) {
  // Connection closed
}

socket.onerror = function...