Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Feature/async sse. Do not merge. #518

Draft
wants to merge 17 commits into
base: develop
Choose a base branch
from
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
ws_demo files.
  • Loading branch information
rma-rripken committed Jan 31, 2024
commit 963e98d95f5bf8a51eb5aad75cf655aa83b8540f
116 changes: 91 additions & 25 deletions cwms-data-api/src/main/webapp/js/ws_demo.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,97 @@
// small helper function for selecting element by id
let id = id => document.getElementById(id);

let clobId = "/TIME SERIES TEXT/6261044";

let addr = "ws://localhost:7000/cwms-data/ws/clob"
// + "?id=" + encodeURI(clobId) + "&officeId=SPK"
let ws = new WebSocket(addr);
ws.onmessage = msg => updateChat(msg);
// ws.onclose = () => alert("WebSocket connection closed");

// Add event listeners to button and input field
id("send").addEventListener("click", () => sendAndClear(id("message").value));
id("message").addEventListener("keypress", function (e) {
if (e.keyCode === 13) { // Send message if enter is pressed in input field
sendAndClear(e.target.value);

var webSocket;
var messageDiv;
var textInput;

var websocketReadyStateArray;
var connectBtn;
var sendTextBtn;
var sendJSONObjectBtn;
var disconnectBtn;
function init(){
messageDiv = document.getElementById("message");
textInput = document.getElementById("text");

websocketReadyStateArray = new Array('Connecting', 'Connected', 'Closing', 'Closed');
connectBtn = document.getElementById('connect');
sendTextBtn = document.getElementById('sendText');
sendJSONObjectBtn = document.getElementById('sendJSONObject');
disconnectBtn = document.getElementById('disconnect');
connectBtn.disabled = false;
sendTextBtn.disabled = true;
sendJSONObjectBtn.disabled = true;
disconnectBtn.disabled = true;
}
function connect(){
try{

var clobId = "/TIME SERIES TEXT/6261044";
webSocket = new WebSocket("ws://localhost:7000/cwms-data/ws/clob" + "?id=" + encodeURI(clobId) + "&officeId=SPK");
messageDiv.innerHTML = "<p>Socket status:" + websocketReadyStateArray[webSocket.readyState] + "</p>";
webSocket.onopen = function(){
messageDiv.innerHTML += "<p>Socket status:" + websocketReadyStateArray[webSocket.readyState] + "</p>";
connectBtn.disabled = true;
sendTextBtn.disabled = false;
sendJSONObjectBtn.disabled = false;
disconnectBtn.disabled = false;
}
webSocket.onmessage = function(msg){
messageDiv.innerHTML += "<p>Server response : " + msg.data + "</p>";
}
webSocket.onclose = function(){
messageDiv.innerHTML += "<p>Socket status:" + websocketReadyStateArray[webSocket.readyState] + "</p>";
connectBtn.disabled = false;
sendTextBtn.disabled = true;
sendJSONObjectBtn.disabled = true;
disconnectBtn.disabled = true;
}
}catch(exception){
messageDiv.innerHTML += 'Exception happen, ' + exception;
}
});
}
function sendText(){
var sendText = textInput.value.trim();
if(sendText==''){

function sendAndClear(message) {
if (message !== "") {
ws.send(message);
id("message").value = "";
messageDiv.innerHTML = '<p>Please input some text to send.</p>';
return;
}else{
try{

webSocket.send(sendText);
messageDiv.innerHTML = '<p>Send text : ' + sendText + '</p>'
}catch(exception){
messageDiv.innerHTML = '<p>Send error : ' + exception + '</p>'
}
}
}
function sendJSONOjbect(){
var sendText = textInput.value.trim();
if(sendText==''){

messageDiv.innerHTML = '<p>Please input some text to send.</p>';
return;
}else{
try{
currDate = new Date();
currHour = currDate.getHours();
currMinutes = currDate.getMinutes();
currSeconds = currDate.getSeconds();

function updateChat(msg) { // Update chat-panel and list of connected users
let data = JSON.parse(msg.data);
id("chat").insertAdjacentHTML("afterbegin", data.userMessage);
id("userlist").innerHTML = data.userlist.map(user => "<li>" + user + "</li>").join("");
currentTime = currHour + ':' + currMinutes + ':' + currSeconds;
jsonObj = {time:currentTime, text:sendText}
tmpSendText = JSON.stringify(jsonObj)
webSocket.send(tmpSendText);
messageDiv.innerHTML = '<p>Send JSON object : ' + tmpSendText + '</p>'
}catch(exception){
messageDiv.innerHTML = '<p>Send error : ' + exception + '</p>'
}
}
}
// When you focus on the input text box, it will call this function to select all the text in the input text box.
function selectAll(){
textInput.select();
}
function disconnect(){
webSocket.close();
}
28 changes: 17 additions & 11 deletions cwms-data-api/src/main/webapp/ws_demo.html
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebsSockets</title>
<link rel="stylesheet" href="style.css">
<meta charset="ISO-8859-1">
<title>Html5 WebSockets Example</title>
<script type="text/javascript" src="js/ws_demo.js" charset="utf-8"></script>
<style>
.block{
display:block;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="chatControls">
<input id="message" placeholder="Type your message">
<button id="send">Send</button>
</div>
<ul id="userlist"> <!-- Built by JS --> </ul>
<div id="chat"> <!-- Built by JS --> </div>
<script src="js/ws_demo.js"></script>
<body onload="init()">
<h3>Html5 WebSockets Example.</h3>
<div id="message" class="block"></div>
<p class="block">Please input some text to Send : <input type="text" id="text" onfocus="selectAll()"/></p>
<button id="connect" onclick="connect()">Connect</button>
<button id="sendText" onclick="sendText()">Send Text</button>
<button id="sendJSONObject" onclick="sendJSONOjbect()">Send JSON Object</button>
<button id="disconnect" onclick="disconnect()">DisConnect</button>
</body>
</html>