Beyond Linguistics: Real-Time Domain Event Mapping with WebSocket and Spring Boot

<?xml version="1.0" encoding="UTF-8"?>
<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>3.4.1</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.soham.demo</groupId>
	<artifactId>visually-appealing-realtime-update</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>visually-appealing-realtime-update</name>
	<description>visually-appealing-realtime-update</description>
	<url />
	<licenses>
		<license />
	</licenses>
	<developers>
		<developer />
	</developers>
	<scm>
		<connection />
		<developerConnection />
		<tag />
		<url />
	</scm>
	<properties>
		<java.version>17</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>

			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>

		</dependency>
	</dependencies>

	<build>
		<finalName>${project.artifactId}</finalName>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<annotationProcessorPaths>
						<path>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</path>
					</annotationProcessorPaths>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

@Configuration
@EnableWebSocket
public class CricketScoreWebSocketConfig implements WebSocketConfigurer {

	private static final String PATH_SCORE = "score";

	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(new TextNotificationHandler(), PATH_SCORE).setAllowedOrigins("*");
	}

}

@Slf4j
public class TextNotificationHandler extends TextWebSocketHandler {
	
	
	private Set<WebSocketSession> sessions = Collections.synchronizedSet(new HashSet<>());

	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		log.debug("afterConnectionEstablished :: session established remote host: {}",session.getRemoteAddress());
		sessions.add(session);
		log.debug("afterConnectionEstablished :: connection from: {} is added. Current Open session count : {}",session.getRemoteAddress(),sessions.size());
	}

	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		for (WebSocketSession webSocketSession : sessions) {
			if (webSocketSession.isOpen()) {
				webSocketSession.sendMessage(message);
			}
		}
	}

	@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		log.debug("afterConnectionEstablished :: session closed remote host: {}",session.getRemoteAddress());
		sessions.remove(session);
		log.debug("afterConnectionEstablished :: connection from: {} is removed. Current Open session count : {}",session.getRemoteAddress(),sessions.size());
	}
}

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Media Operator For XYZ Television Cricket Match IND vs ENG</title>
	<style>
		body {
			margin: 0;
			height: 100%;
			width: 100%;
		}

		canvas {
			display: block;
		}

		.container {
			display: flex;
			height: 100vh;
			width: 100%;
		}

		.left-section {

			background-color: lightblue;
			width: 80%;
			padding: 20px;
			box-sizing: border-box;

		}

		.right-section {
			width: 20%;
			background-color: lightcoral;
			padding: 20px;
			box-sizing: border-box;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="left-section">
			<canvas id="cricketField"></canvas>
		</div>
		<div class="right-section">
			<textarea rows="10" cols="50" id="tb_Comment" placeholder="Message here"></textarea>
			<button onclick="sendTextMsg()">Send</button>
			<fieldset>
				<legend>Quick Panel</legend>
				<button onclick="sendToastMsg('boundary')">Boundary</button>
				<button onclick="sendToastMsg('over-boundary')">Over-boundary</button>
				<button onclick="sendToastMsg('out')">OUT!!</button>
				<button onclick="sendToastMsg('100')">100* NOT OUT</button>
			</fieldset>

		</div>
	</div>
	<script>
		let socket;
		let dto;
		window.onload = function () {
			socket = new WebSocket("ws://"+window.location.host+"/score");
			socket.onmessage = function (event) {
				console.log(event);
			};

		};


		const canvas = document.getElementById('cricketField');
		const ctx = canvas.getContext('2d');

		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		function drawCricketField() {
			ctx.fillStyle = 'green';
			ctx.fillRect(0, 0, canvas.width, canvas.height);

			const centerX = canvas.width / 2;
			const centerY = canvas.height / 2;
			const fieldWidth = 600;
			const fieldHeight = 400;

			// Draw the oval cricket field
			ctx.fillStyle = 'lightgreen';
			ctx.beginPath();
			ctx.ellipse(centerX, centerY, fieldWidth / 2, fieldHeight / 2, 0, 0, Math.PI * 2);
			ctx.fill();

			// Draw pitch and creases
			ctx.fillStyle = 'white';
			ctx.fillRect(centerX - 3, centerY - 150, 6, 300); // Pitch
			ctx.fillRect(centerX - 150, centerY - 3, 300, 6); // Crease

			// Draw stumps
			ctx.fillRect(centerX - 6, centerY - 160, 4, 20);
			ctx.fillRect(centerX - 2, centerY - 160, 4, 20);
			ctx.fillRect(centerX + 2, centerY - 160, 4, 20);

			ctx.fillRect(centerX - 6, centerY + 140, 4, 20);
			ctx.fillRect(centerX - 2, centerY + 140, 4, 20);
			ctx.fillRect(centerX + 2, centerY + 140, 4, 20);
		}

		let drawing = false;
		let startX = 0;
		let startY = 0;
		let currentX = 0;
		let currentY = 0;

		canvas.addEventListener('mousedown', (e) => {
			const rect = canvas.getBoundingClientRect();
			const mouseX = e.clientX - rect.left;
			const mouseY = e.clientY - rect.top;
			// console.log(mouseX+" " +mouseY+ctx.isPointInPath(mouseX, mouseY));
			//  if (ctx.isPointInPath(mouseX, mouseY)) {
			drawing = true;
			startX = mouseX;
			startY = mouseY;
			currentX = mouseX;
			currentY = mouseY;
			// }
		});

		canvas.addEventListener('mousemove', (e) => {
			if (drawing) {
				const rect = canvas.getBoundingClientRect();
				const mouseX = e.clientX - rect.left;
				const mouseY = e.clientY - rect.top;
				currentX = mouseX;
				currentY = mouseY;
				clearCanvas();
				drawLine(startX, startY, currentX, currentY);
			}
		});

		canvas.addEventListener('mouseup', () => {
			drawing = false;
		});

		canvas.addEventListener('mouseout', () => {
			drawing = false;
		});

		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawCricketField();
		}

		function drawLine(startX, startY, endX, endY) {
			ctx.beginPath();
			ctx.moveTo(startX, startY);
			ctx.lineTo(endX, endY);
			ctx.strokeStyle = 'red';
			ctx.lineWidth = 5;  // Increase the line width for better visibility
			ctx.stroke();
			ctx.closePath();
			dto = {};


			dto.startX = startX;
			dto.startY = startY;
			dto.endX = endX;
			dto.endY = endY;
			sendMessage("VISUAL", dto);
		}

		function sendMessage(strType, dto) {

			dto.id = Date.now();
			dto.type = strType;
			socket.send(JSON.stringify(dto));
		}
		function sendTextMsg() {
			dto = {};
			dto.message = document.getElementById("tb_Comment").value;

			sendMessage("TEXT", dto);
		}
		function sendToastMsg(msg) {
			dto = {};
			dto.message = msg;

			sendMessage("TOAST", dto);
		}
		drawCricketField();
	</script>
</body>

</html>

docker run -p 9876:9876 sohamsg/dockerhub:websocket-cricket-match-commetary 

public enum EvtType {

	VISUAL,TEXT,TOAST , // Keep adding your event types for another domain
}
class MarkUpClassifierService{
   
  public Optional<EvtType> classifyMessagge(AbstractMessage message){
       return classifierStgragey.apply(message);
   }
  
   /**
     Define your strategy to extract the category of the message.
     return empty Optional unless a category is found
   */
  private Function<AbstractMessage,Optional<EvtType>> classifierStgragey;
   

}

interface IMarkup{
  public void markup(AbstractMessage message, OutputStream outStream);
}

@Service
@SLF4j
@RequiredArgsConstructor
// We use it as regsitered bean in Spring but this is not specific to any framework   

class MarkupLookupService{
  private final MarkupRegistry regitry; // We use it as regsitered bean in Spring but this is not specific to any framework   
  public Optional<IMarkup> lookupMarkup(EvtType evtType){
     if(regitry.supports(evtType)){
       return registry.get(evtType);//write your look up logic
     }else{
        return Optional.<IMarkup>empty();
     }
  }

}