Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

How to use a Socket.io server in Oracle Apex

Jegor WielerFeb 4 2025

Hi everyone,

I am currently experimenting and wonder if it is possible to link Oracle Apex (Free Workspace) to my Node.jS Socket.io server? Has anyone tried this before and can tell me how it works?

As an example, I have a HTML, Javascript Application that interacts with my Node.JS server, which I would like to install in Oracle APEX.

I would be very grateful for any advice!

For those who are interested, I have added the HTML, JS and server-side code below.

Oracle Apex Version: 24.2.1
Best Regards
Jegor

<!--HTML Application -->
<!doctype html> 
<html lang="de"> 
<head> 
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content"> 
<title>CoderDojo Linz | Chat Beispiel</title> 
<style> 
/* Globale Schriftart setzen (weniger "schnörkelig") */ 
body { 
font-family: sans-serif; 
} 

/* Chat-Seite initial ausblenden */ 
.chat.page { 
display: none; 
} 

/* Format für Benutzernamen bei der Ausgabe einer Chat-Nachricht */ 
.username { 
font-weight: bold; 
margin-right: 5px; 
} 
</style> 
</head> 
<body> 
<!-- Login-Seite --> 
<div class="login page"> 
<h3 class="title">Wie ist dein Name?</h3> 
<input class="usernameInput" type="text" maxlength="14" /> 
</div> 

<!-- Chat-Seite (initial ausgeblendet) --> 
<div class="chat page"> 
<h3 class="title">Was möchtest du allen anderen mitteilen?</h3> 
<input class="inputMessage" placeholder="Type here..."/> 
<ul class="messages"></ul> 
</div> 

<!-- Programmcode auf der Client-Seite --> 
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="https://cdn.socket.io/4.8.1/socket.io.min.js" integrity="sha384-mkQ3/7FUtcGyoppY6bz/PORYoGqOl7/aSUMn2ymDOJcapfS6PHqxhRTMh1RR0Q6+" crossorigin="anonymous"></script> 
<script src="main_http.js"></script> 
</body> 
</html>
//Client-Side
$(function () { 
// Hilfsvariablen für HTML-Elemente werden mit Hilfe von JQuery gesetzt. 
var $window = $(window); 
var $usernameInput = $('.usernameInput'); // Eingabefeld für Benutzername 
var $messages = $('.messages'); // Liste mit Chat-Nachrichten 
var $inputMessage = $('.inputMessage'); // Eingabefeld für Chat-Nachricht 
var $loginPage = $('.login.page'); // Login-Seite 
var $chatPage = $('.chat.page'); // Chat-Seite 

var username; // Aktueller Benutzername 
var connected = false; // Kennzeichen ob angemeldet 

// Eingabefeld für Benutzername erhält den Fokus 
var $currentInput = $usernameInput.focus(); 

// Socket.io Objekt anlegen 
var socket = io(); 
console.log(socket) 

// ==== Code für Benutzerschnittstelle 

// Tastendruck behandeln 
$window.keydown(function (event) { 
console.log("HI") 
// Die Return-Taste (Ascii 13) behandeln wir speziell 
if (event.which === 13) { 
if (username) { 
// Wenn der Benutzername schon gesetzt ist, handelt es sich 
// um eine Chat-Nachricht. 
sendMessage(); 
} else { 
// Wenn der Benutzername noch nicht gesetzt ist, hat sich 
// der Benutzer gerade angemeldet. 
setUsername(); 
} 
} 
}); 

// Benutzername wird gesetzt 
function setUsername() { 
// Benutzername aus Eingabefeld holen (ohne Leerzeichen am Anfang oder Ende). 
username = $usernameInput.val().trim(); 

// Prüfen, ob der Benutzername nicht leer ist 
if (username) { 
// Loginmaske ausblenden und Chat-Seite einblenden 
$loginPage.fadeOut(); 
$chatPage.show(); 

// Chat-Nachricht wird neues, aktuelles Eingabefeld 
$currentInput = $inputMessage.focus(); 

// Server mit Socket.io über den neuen Benutzer informieren. Wenn die 
// Anmeldung klappt wird der Server die "login"-Nachricht zurückschicken. 
socket.emit('add user', username); 
} 
} 

// Chat-Nachricht versenden 
function sendMessage() { 
// Nachricht aus Eingabefeld holen (ohne Leerzeichen am Anfang oder Ende). 
var message = $inputMessage.val().trim(); 

// Prüfen, ob die Nachricht nicht leer ist und wir verbunden sind. 
console.log(message) 
console.log(connected) 
if (message && connected) { 
// Eingabefeld auf leer setzen 
$inputMessage.val(''); 

// Chat-Nachricht zum Chatprotokoll hinzufügen 
addChatMessage({ username: username, message: message }); 

// Server über neue Nachricht informieren. Der Server wird die Nachricht 
// an alle anderen Clients verteilen. 
socket.emit('new message', message); 
} 
} 

// Protokollnachricht zum Chat-Protokoll anfügen 
function log(message) { 
var $el = $('<li>').addClass('log').text(message); 
$messages.append($el); 
} 

// Chat-Nachricht zum Chat-Protokoll anfügen 
function addChatMessage(data) { 
var $usernameDiv = $('<span class="username"/>').text(data.username); 
var $messageBodyDiv = $('<span class="messageBody">').text(data.message); 
var $messageDiv = $('<li class="message"/>').append($usernameDiv, $messageBodyDiv); 
$messages.append($messageDiv); 
} 

// ==== Code für Socket.io Events 

// Server schickt "login": Anmeldung war erfolgreich 
socket.on('login', function (data) { 
console.log("hi2") 
connected = true; 
log("Willkommen beim Chat!"); 
}); 

// Server schickt "new message": Neue Nachricht zum Chat-Protokoll hinzufügen 
socket.on('new message', function (data) { 
addChatMessage(data); 
}); 

// Server schickt "user joined": Neuen Benutzer im Chat-Protokoll anzeigen 
socket.on('user joined', function (data) { 
log(data + ' joined'); 
}); 

// Server schickt "user left": Benutzer, der gegangen ist, im Chat-Protokoll anzeigen 
socket.on('user left', function (data) { 
log(data + ' left'); 
}); 
});
//Server Side
var express = require('express'); 
var app = require("express")(); 
var server = require('http').createServer(app); 
var io = require('socket.io')(server); 

// Mit diesem Kommando starten wir den Webserver. 
var port = process.env.PORT || 3000; 
server.listen(port, function () {  
	console.log('Webserver läuft und hört auf Port %d', port); 
}); 

// Hier teilen wir express mit, dass die öffentlichen HTML-Dateien 
// im Ordner "public" zu finden sind. 
app.use(express.static(__dirname)); 

// === Ab hier folgt der Code für den Chat-Server 

io.on('connection', function (socket) { 
	var addedUser = false; 

	// Funktion, die darauf reagiert, wenn sich der Benutzer anmeldet 
	socket.on('add user', function (username) { 
	// Benutzername wird in der aktuellen Socket-Verbindung gespeichert 
		socket.username = username; 
		addedUser = true; 

		// Dem Client wird die "login"-Nachricht geschickt, damit er weiß, 
		// dass er erfolgreich angemeldet wurde. 
		socket.emit('login'); 

		// Alle Clients informieren, dass ein neuer Benutzer da ist. 
		socket.broadcast.emit('user joined', socket.username); 
}); 

// Funktion, die darauf reagiert, wenn ein Benutzer eine Nachricht schickt 
	socket.on('new message', function (data) { 
	// Sende die Nachricht an alle Clients 
		socket.broadcast.emit('new message', { 
		username: socket.username, 
		message: data 
	}); 
	console.log(data) 
}); 

// Funktion, die darauf reagiert, wenn sich ein Benutzer abmeldet. 
// Benutzer müssen sich nicht explizit abmelden. "disconnect" 
// tritt auch auf wenn der Benutzer den Client einfach schließt. 
	socket.on('disconnect', function () { 
		if (addedUser) { 
		// Alle über den Abgang des Benutzers informieren 
			socket.broadcast.emit('user left', socket.username); 
		} 
	}); 
});
This post has been answered by Ed Jones-Oracle on Feb 4 2025
Jump to Answer
Comments
Post Details
Added on Feb 4 2025
3 comments
115 views