integration-websocket-rest-api
Version:
A JavaScript library for easy integration of REST API and WebSocket communication with state management in JS applications.
66 lines (55 loc) • 2.01 kB
HTML
<html>
<head>
<title>Integration Framework Test</title>
</head>
<body>
<h2>Integration Framework Test</h2>
<button onclick="loadChatHistory()">Load Chat Messages</button>
<div id="messages"></div>
<input id="newMessage" placeholder="Type a message..." />
<button onclick="sendMessage()">Send</button>
<script src="./integration-files/api-client-v1.js"></script>
<script src="./integration-files/websocket-client-v1.js"></script>
<script>
// Create API and WebSocket clients
const apiClient = new ApiClient("http://localhost:3000/api/messages"); // Use the correct API URL
const webSocketClient = new WebSocketClient("ws://localhost:3000");
// Open WebSocket connection
wsClient.openConnection();
// Load chat history from API
async function loadChatHistory() {
const messages = await apiClient.sendRequest("GET", "/messages");
displayMessages(messages);
}
// Send message via WebSocket
function sendMessage() {
const message = document.getElementById("newMessage").value;
wsClient.sendMessage(message);
displayMessage({ sender: "Client", message });
}
// Display messages in DOM
function displayMessages(messages) {
const messagesDiv = document.getElementById("messages");
messagesDiv.innerHTML = "";
for (let msg of messages) {
displayMessage(msg);
}
}
function displayMessage(msg) {
const msgDiv = document.createElement("div");
msgDiv.classList.add(msg.sender.toLowerCase() + "-message");
msgDiv.innerHTML = `
<h3>${msg.sender}</h3>
<p>${msg.message}</p>
`;
document.getElementById("messages").appendChild(msgDiv);
}
// Display WebSocket messages
wsClient.socket.onmessage = (evt) => {
const msg = JSON.parse(evt.data);
displayMessage(msg);
};
</script>
</body>
</html>