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
<!doctype html>
<html lang="de">
<head>
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
<title>CoderDojo Linz | Chat Beispiel</title>
<style>
body {
font-family: sans-serif;
}
.chat.page {
display: none;
}
.username {
font-weight: bold;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="login page">
<h3 class="title">Wie ist dein Name?</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
<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>
<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>
$(function () {
var $window = $(window);
var $usernameInput = $('.usernameInput');
var $messages = $('.messages');
var $inputMessage = $('.inputMessage');
var $loginPage = $('.login.page');
var $chatPage = $('.chat.page');
var username;
var connected = false;
var $currentInput = $usernameInput.focus();
var socket = io();
console.log(socket)
$window.keydown(function (event) {
console.log("HI")
if (event.which === 13) {
if (username) {
sendMessage();
} else {
setUsername();
}
}
});
function setUsername() {
username = $usernameInput.val().trim();
if (username) {
$loginPage.fadeOut();
$chatPage.show();
$currentInput = $inputMessage.focus();
socket.emit('add user', username);
}
}
function sendMessage() {
var message = $inputMessage.val().trim();
console.log(message)
console.log(connected)
if (message && connected) {
$inputMessage.val('');
addChatMessage({ username: username, message: message });
socket.emit('new message', message);
}
}
function log(message) {
var $el = $('<li>').addClass('log').text(message);
$messages.append($el);
}
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);
}
socket.on('login', function (data) {
console.log("hi2")
connected = true;
log("Willkommen beim Chat!");
});
socket.on('new message', function (data) {
addChatMessage(data);
});
socket.on('user joined', function (data) {
log(data + ' joined');
});
socket.on('user left', function (data) {
log(data + ' left');
});
});
var express = require('express');
var app = require("express")();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;
server.listen(port, function () {
console.log('Webserver läuft und hört auf Port %d', port);
});
app.use(express.static(__dirname));
io.on('connection', function (socket) {
var addedUser = false;
socket.on('add user', function (username) {
socket.username = username;
addedUser = true;
socket.emit('login');
socket.broadcast.emit('user joined', socket.username);
});
socket.on('new message', function (data) {
socket.broadcast.emit('new message', {
username: socket.username,
message: data
});
console.log(data)
});
socket.on('disconnect', function () {
if (addedUser) {
socket.broadcast.emit('user left', socket.username);
}
});
});