By kswaughs | Tuesday, December 13, 2016

Spring Boot WebSocket Server push + AngularJS client

WebSocket is a very thin, lightweight layer above TCP used to build interactive web applications that send messages back and forth between a browser and the server.

The best examples are live updates websites, where once user access the website neither user nor browser sends request to the server to get the latest updates. Server only keeps sending the messages to the browser.

In this example, I am building a WebSocket application with Spring Boot using STOMP Messaging to provide the cricket live score updates for every 5 secs.

Step 1 : Maven setup

pom.xml
<project xmlns="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/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.0.RELEASE</version>
    </parent>
    <groupId>com.kswaughs.spring</groupId>
    <artifactId>springboot-websocket</artifactId>
    <version>1.0</version>
    <name>springboot-websocket</name>
    <description>Spring Boot WebSocket Application</description>
    <dependencies>
        <!-- Spring framework related jars -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
            <version>1.3.0.RELEASE</version>
        </dependency>
         <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency> 
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

Step 2: Model class to hold the batsman & score details

Batsman.java
package com.kswaughs.cricket.beans;

public class Batsman {
    
    private String name;
    
    private int runs;
    
    private int balls;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getRuns() {
        return runs;
    }

    public void setRuns(int runs) {
        this.runs = runs;
    }

    public int getBalls() {
        return balls;
    }

    public void setBalls(int balls) {
        this.balls = balls;
    }
    
}

Step 3: Create a Web Socket & STOMP Messaging Configuration

LiveScoreSocketConfig.java
package com.kswaughs.cricket.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocketMessageBroker
public class LiveScoreSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/livescore-websocket").setAllowedOrigins("*"). withSockJS();
    }

}

Step 4: Create a Message handling controller

LiveCricketController.java
package com.kswaughs.cricket.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

import com.kswaughs.cricket.beans.Batsman;
import com.kswaughs.cricket.service.LiveScoreService;

@Controller
public class LiveCricketController {
    
    @Autowired
    private LiveScoreService service;
    
    @MessageMapping("/score")
    @SendTo("/topic/myscores")
    public List<Batsman> getScores() {
        
        List<Batsman> scoresList = service.getScore();
        
        return scoresList;
    }
}

Step 5: Business Logic Implementation

Create a business logic component to get the live updates from back-end service. In this example, this class initializes the list of batsman objects with pre-filled data and later for every request, it will increments the runs & balls by 1 of any one batsman randomly.

LiveScoreService.java
package com.kswaughs.cricket.service;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import org.springframework.stereotype.Component;

import com.kswaughs.cricket.beans.Batsman;

@Component
public class LiveScoreService {
    
    private List<Batsman> scoresList = initialScores();
    
    public List<Batsman> getScore() {

        Random rand = new Random();

        int randomNum = rand.nextInt((2 - 1) + 1);
        Batsman batsman = scoresList.get(randomNum);

        batsman.setBalls(batsman.getBalls() + 1);
        batsman.setRuns(batsman.getRuns() + 1);

        return scoresList;
    }

    private List<Batsman> initialScores() {

        Batsman sachin = new Batsman();

        sachin.setName("Sachin Tendulkar");
        sachin.setRuns(24);
        sachin.setBalls(26);

        Batsman ganguly = new Batsman();
        ganguly.setName("Sourav Ganguly");
        ganguly.setRuns(28);
        ganguly.setBalls(30);

        List<Batsman> scoresList = new ArrayList<Batsman>();

        scoresList.add(sachin);
        scoresList.add(ganguly);

        return scoresList;
    }

}

Step 6: Scheduler Configuration

Configure a Scheduler task to send the updated scores to subscribed channel. The task is configured to run every 5 seconds.

ScoreScheduler.java
package com.kswaughs.cricket.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;

import com.kswaughs.cricket.service.LiveScoreService;

@Configuration
@EnableScheduling
public class ScoreScheduler {
        
    @Autowired
    private SimpMessagingTemplate template;
    
    @Autowired
    LiveScoreService service;

    @Scheduled(fixedRate = 5000)
    public void publishUpdates(){
       
        template.convertAndSend("/topic/myscores", service.getScore());
       
    }
 
}

Step 7 : Create a main class which will initialize and runs the spring boot application.

BootApp.java
package com.kswaughs.cricket.config;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication
@ComponentScan({ "com.kswaughs.cricket" })
public class BootApp {
    
    public static void main(String[] args) {
        
        SpringApplication.run(new Object[] { BootApp.class }, args);

    }
}

Testing : AngularJS WebSocket Example

Now we will connect to this application from HTML Page using AngularJS Stomp component and display the live score updates. You can download ng-stomp.standalone.min.js from https://github.com/beevelop/ng-stomp.

scores.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Client</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="ng-stomp.standalone.min.js"></script>
<script type="text/javascript">
  
  var app = angular.module('kswaughsLiveScore', ['ngStomp']);
 
  app.controller('LiveController', function ($stomp, $scope) {
  
      $scope.myres = [];
  
      $stomp.connect('http://localhost:8080/livescore-websocket', {})
            .then(function (frame) {
                var subscription = $stomp.subscribe('/topic/myscores', 
                    function (payload, headers, res) {
                        $scope.myres = payload;
                        $scope.$apply($scope.myres);
                });
            
                $stomp.send('/app/score', '');
         });
  });
  
 </script>
 <style> 
 .liveScore{
    color : blue;
 }

li{
 list-style: none;
 padding:0px 0px 10px 0px;
}
</style>
</head>
<body >
<div class="liveScore" ng-app="kswaughsLiveScore" ng-controller="LiveController">
   <p>Cricket - Live Score</p>
    <ul>
        <li ng-repeat="x in myres">{{$index+1}} - {{x.name}} - <b>{{x.runs}}</b> runs (<b>{{x.balls}}</b>balls)</li>
    </ul>
</div>    
</body>
</html>

Output

Cricket - Live Score

  • 1 - Sachin Tendulkar - 24 runs ( 26 balls)
  • 2 - Sourav Ganguly - 28 runs ( 30 balls)

The above scores gets updated every 5 secs when the server application runs.

Recommend this on


30 comments:

  1. How to keep every messages dequeue and enqueue from Apache ActiveMQ's topics in MySQL database using JMS?

    ReplyDelete
  2. on which url its running, I tried to run on http://localhost:8080/livescore-websocket
    default message is coming "Welcome to SockJS!" ... on which url this application will run ?

    ReplyDelete
    Replies
    1. You have to run the client application. Here the client application is scores.html. Access 'scores.html' in any web browser which will connect to web socket application & displays the scores without browser refresh.

      Delete
  3. Please click to play,if you wanna join casino online. Thank you
    บาคาร่าออนไลน์
    gclub
    gclub casino

    ReplyDelete
  4. high stakes - low, single, single, single, etc. One of the advantages of playing online is that it will not hit the dealer cheat,

    maxbet

    ReplyDelete
  5. How to download this application

    ReplyDelete
  6. directly. It takes only 5-10 minutes, you can come to play or withdraw money to spend it. Online casinos are ready to
    จีคลับ

    ReplyDelete
  7. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging…
    Angularjs course in chennai

    ReplyDelete
  8. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    hadoop training in chennai

    angularjs training in chennai

    ReplyDelete
  9. Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. We are providing AngularJs training in velachery.
    For more details:AngularJs training in velachery

    ReplyDelete
  10. Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
    Web Design Training

    ReplyDelete
  11. Gclub Open for service via mobile phone All systems without the need to load extra programs to heavy machines Play as much as possible without minimum - open 24 hours a day, play and get rich with new playing techniques that come to update for members to use to play real money all the time Application is easy, just a few steps. Plus, you can plan your own play because you can play with no minimum through the modern live woven system. Apply today to receive many special promotions.

    จีคลับ

    ReplyDelete
  12. Great Article. Thank you for sharing! Really an awesome post for every one.

    IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Project Domains for IT It gives you tips and rules that is progressively critical to consider while choosing any final year project point.

    Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
    Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

    ReplyDelete
  13. Great efforts put to publish these kinds of articles that are very useful to know. I’m thoroughly enjoying your blog. And Good comments create great relations. You’re doing an excellent job. Keep it up.

    Magento Development Training Course in Chennai Zuan Education

    Selenium Training Course in Chennai Zuan Education

    ReplyDelete
  14. Nice blog, it’s so knowledgeable, informative, and good looking site. I appreciate your hard work. Good job. Thank you for this wonderful sharing with us. Keep Sharing.
    Digital Marketing Course In Kolkata

    ReplyDelete
  15. ดาวน์โหลดเกม pussy88 ตัวช่วยเพิ่มความเพลิดเพลิน
    หากแม้ในขณะนี้เกม pussy888 จะเป็นเกมซึ่งสามารถเข้าถึงได้ง่าย ช่วยสร้างความเพลิดเพลิน ความน่าระทึกใจให้กับคนที่พอใจการเล่นเกมคาสิโนได้อย่างดีเยี่ยมด้วยแล้ว ถ้าเกิดคุณอยากได้เพิ่มความสบายสำหรับเพื่อการเข้าถึงเกมคาสิโนออนไลน์นี้ได้มากขึ้น สามารถเลือกใช้บริการ ดาวน์โหลดpussy888 ซึ่งเป็นตัวช่วยที่จะทำให้ท่านสนุกสนานกับเกมคาสิโนออนไลน์นี้ได้เร็วทันใจกว่าเดิม ตกลงว่าตามพวกเราไปดูกันเลยว่าขั้นตอนสำหรับการดาวน์โหลด pussy888 มีขั้นตอนเป็นยังไงบ้าง
    กรรมวิธีการดาวน์โหลดpussy888
    ถ้าเกิดคุณอยากเล่นเกมคาสิโน pussy888 ให้สบาย แล้วก็สามารถเข้าถึงได้ง่ายรวมทั้งเร็วมากเพิ่มขึ้น คุณสามารถเข้ามาทำดาวน์โหลดpussy888 ตามขั้นตอนนี้ได้เลย
    • เข้าไปที่เว็บไซต์คาสิโนออนไลน์ที่คุณปรารถนาที่จะเข้าไปเล่น pussy888 ด้วย โดยคุณจำเป็นต้องมั่นอกมั่นใจเพราะว่าเว็บไซต์ที่คุณเลือกนั้น เป็นเว็บไซต์ที่ไว้ใจได้ รวมทั้งจะผิดทุจริตเมื่อชนะเกมคาสิโนออนไลน์
    • แล้วเข้าไปลงทะเบียนเป็นสมาชิก เพื่อเอารหัสยูส เพื่อเข้าไปเล่นเกม pussy888
    • แล้วเมื่อคุณลงทะเบียนเป็นสมาชิกเป็นระเบียบแล้ว ไปที่หน้าดาวน์โหลดเกมpussy888
    • กระทำการแสกกลางนคิวอาร์รหัสสำหรับโครงข่ายระบบโทรศัพท์เคลื่อนที่ของคูณ
    • เอาอย่างกระบวนการดาวน์โหลดpussy888 ถัดไปคุณก็จะมีเกมคาสิโน pussy888 อยู่ในเครื่องของคุณแล้ว
    พูดได้ว่าขั้นตอนสำหรับเพื่อการดาวน์โหลดpussy888 ที่พวกเราเอามาฝากนั้นไม่ยากเลยใช่ไหมขา คุณสามารถเชื่อมั่นได้เลยว่าคุณจะเข้ามาเล่นเกมpussy888 ได้อย่างสนุกสนาน และก็ตื่นเต้นมากยิ่งกว่าเดิม ที่สำคัญ คุณจะมีเงินจากการเล่นเกมpussy888 ได้อย่างไม่ต้องสงสัย
    ท้ายที่สุดเว้นแต่เพิ่มความสบายสำหรับการเข้าถึงเกมคาสิโนออนไลน์ pussy888ของคุณแล้ว เพศผู้เล่นเกมเองควรต้องจัดแจงมาให้พร้อมในการเล่นเกมคาสิโน pussy888 ไม่ว่าจะเป็นการทำความรู้จักกับเกมคาสิโนออนไลน์ที่คุณพอใจ บาคาร่า รูเล็ต ยิงปลา เกมไพ่ หรือเกม สล็อตออนไลน์ ที่นับได้ว่าเป็นเกมที่ได้รับความนิยมในค่ายเกม pussy888 อย่างใหญ่โต และก็ด้วยความสนุกสนานนี้เอง คุณควรต้องระวังในเรื่องแขนใช้เงินในเกมคาสิโนได้อย่างดีเยี่ยม ถ้าเกิดคุณไม่ต้องการที่จะอยากมีปัญหาในเกมคาสิโน pussy888 เนื่องจากหลายครั้งถ้าเกิดคุณปราศจากความพร้อมในด้านการเงินที่เอามาเล่นเกมคาสิโน pussy888 แต่ว่าไปยืมเงินผู้อื่นมาเล่นเกมคาสิโนpussy888 อาจจะก่อให้คุณมีปัญหาทางด้านการเงินตามมาได้ง่าย โดยเหตุนั้นคุณควรมีความละเอียดถี่ถ้วนอย่างมากมาย แม้จะต้องอากรอาทิเช่นเกมคาสิโนpussy888 หรือเกมคาสิโนอะไรก็ตามที่คุณพึงพอใจ
    ท้ายที่สุดถ้าคุณยังพอใจที่จะเข้ามาเล่นเกม pussy888 สามารถเข้ามาสมัครเล่นเกมนี้ถึงที่เหมาะเว็บไซต์คาสิโนออนไลน์ของพวกเรา พวกเรามีโปรโมชั่นพิเศษ วิธีการเล่นเกม แล้วก็ผู้ช่วยที่จะรอบริการทุกคน ตลอด 24 ชั่วโมง
    pussy888

    ReplyDelete
  16. สูตรเล่นเกมสล็อตออนไลน์ pussy888 ที่สามารถช่วยให้ท่านได้โอกาสทำเงินมากเพิ่มขึ้น
    สำหรับเพื่อการเล่นเกมคาสิโนออนไลน์ การตระเตรียมสำหรับเพื่อการเล่นเกมนับว่าเป็นเรื่องจำเป็นที่ผู้เล่นจำเป็นจะต้องเตรียมตัวมาให้ดี ด้วยแบบอย่างเกมคาสิโนแต่ละเกมนั้นมีความไม่เหมือนอีกทั้งกรรมวิธีการเล่น กระบวนการทำเงิน แล้วก็เคล็ดวิธีสำหรับเพื่อการเพิ่มช่องทางที่สามารถจะช่วยให้ผุ้เล่นสามารถทำเงินได้ง่าย และก็เร็วมากขึ้น ซึ่งแม้คุณพอใจที่จะเข้ามาเล่นเกมคาสิโนออนไลน์โดยยิ่งไปกว่านั้นเกมสล็อตpussy888 ต่างก็รู้จักเตรียมพร้อมเล่าเรียนในสูตรเกมสล็อตออนไลน์ สูตรที่จะเป็นตัวช่วยให้คุณสามารถทำเงินจากเกมคาสิโนสล็อตออนไลน์ได้มากขึ้นกว่าเดิม รวมทั้งวันนี้พวกเรามีแนวทางสำหรับเพื่อการเล่นเกมสล็อตpussy888 ที่สามารถช่วยทำให้ท่านมีรายได้มากขึ้นแบบง่ายๆมากมายฝาก ถ้าคุณพึงพอใจหรือประทับใจในสิ่งที่พวกเราจัดแจงมี้ก็สามารถนำไปประยุกต์กับการเล่นกกมคาสิโนออนไลน์ของคุณได้ตามอยาก ทดลองตามพวกเราไปดูเลยดีมากกว่าว่าวิธี หรือสูตรเกมสล็อตpussy888 คุณจำเป็นต้องเล่นเกมแบบไหนถึงจะได้โอกาสสำหรับเพื่อการทำเงินเยอะขึ้นเรื่อยๆกว่าเดิม
    วิธีการเล่นเกมสล็อตpussy888
    เนื่องจากการเล่นเกมคาสิโนออนไลน์เพศผู้เล่นเองควรต้องรู้จักพินิจ และก็มองให้ดีว่าเกมคาสิโนออนไลน์ที่คุณเล่นอยู่นั้นได้โอกาสที่จะสามารถทำเงินได้มากน้อยมากแค่ไหน ถ้าเกิดคุณไม่รู้จักก็สามารถทดลองนำแนวทางการทำเงินนี้ไปประยุกต์ในเกมสล็อตpussy888ของคุณได้เลย
    ทดสอบเล่นเกมสล็อตpussy888ในตอนที่แตกต่าง แล้วหลังจากนั้นสังเกตดูให้ดีว่า เวลาใดที่คุณจะสามารถทำเงินในเกมคาสิโนออนไลน์ได้มากที่สุดซึ่งเวลานั้นๆแสดงว่าตรงเวลาที่ระบบปลดปล่อยเงินให้กับผู้เล่นนั้นเอง แนวทางนี้ นับว่าเป็นขั้นตอนการสำหรับเพื่อการจับไต๋เว็บไซต์คาสิโนออนไลน์สล็อตpussy888อีกแนวทางหนึ่งที่น่าดึงดูด และก็ช่วยทำให้ผู้เล่นได้โอกาสสำหรับในการทำเงินได้ง่ายดายมากยิ่งขึ้น
    จัดหนังกับการสปิน สำหรับเพื่อการสปินเกมสล็อต
    pussy888 มีนานัปการต้นแบบร่วมกัน แม้กระนั้นเพื่อเป็นการเพิ่มช่องทางสำหรับเพื่อการทำเงินให้กับเพศผู้เล่นได้มากที่สุด ผู้เล่นควรจะเลือกซื้อสปินที่ราคาแพงสูงมากขึ้นมา เนื่องจากว่าช่องทางที่คุณจะสามารถทำเงินได้นั้นมีสูงขึ้นยิ่งกว่าสปินราค้างต่ำ
    เล่นเกมสล็อตpussy888กับว็บที่คุณเชื่อใจได้ และก็แน่ใจว่าชำระเงินจริง ด้วยเหตุว่ามีหลายเว็บไซต์ที่เมื่อผู้เล่น เล่นได้ กลับไม่ชำระเงิน ด้วยเหตุนี้จำต้องเลือกเว็บไซต์เชื่อใจได้ ที่สำคัญจะต้องไม่มีเรื่องราวฉ้อฉลด้วย
    การเล่นเกมคาสิโนออนไลน์นั้นเป็นเรื่องที่ไม่ได้ยากเย็นที่คุณจะสามารถทำเป็น แม้กระนั้นคุณจะสามารถทำเงินก้าวหน้าเยอะขึ้นถ้าเกิดมีการจัดแจง แล้วก็รุ้จะลงทุนเล่นเกมคาสิโนออนไลน์อย่างชาญฉลาด ดดยคุณสามารถเข้ามาเรียนเคล็ดวิธีแนวทางสำหรับในการเล่นเกมคาสิโนสล็อตpussy888ดี่เว็บไซต์ของพวกเรา

    ReplyDelete