Socket.io connecting but not emitting or receiving in Electron.js


#1

Hello,
I’m trying to make a transparent, click-through chat program using electron.js and socket.io, but while my socket.io code works perfectly when I test it in the console or browser, once I load it into electron code the sockets only connect, they can’t receive or emit data.

I am using an older version of Electron.js (v1.4.14) since I want the application to be transparent.

Really appreciate it if someone could answer this.

Here’s my code

Server.js

var port = 8123

var io = require('socket.io').listen(port);
console.log('listening on *:' + port);

io.on('connection', function(socket) {
	console.log('a user connected');
	io.emit('chat_message', "Greetings from the server");
	// socket.emit('chat_message', "Greetings from the server");


	socket.on('chat_message', function(msg1) {
		console.log(msg1);
		socket.emit('chat_message', "Reply from server");
	});

	socket.on('disconnect', function(){
		console.log('user disconnected');
	});
});

view.js (Client)

// Load jQuery and assign to $
let $ = require('jquery') 

$('#messages').append($('<li>').text("Initial setup"));

const io = require('socket.io-client');
var socket = io.connect('http://localhost:8123');

$('form').submit(function(){
	var msg = $('#m').val();
	if (!msg) {
		return false;
	}

	socket.emit('chat_message', msg);
	$('#messages').append($('<li>').text("You sent: "+msg));
	window.scrollTo(0, document.body.scrollHeight);					
	$('#m').val('');
	return false;
});

socket.on('chat_message', function(msg){
	$('#messages').append($('<li>').text("Received: "+msg));
	window.scrollTo(0, document.body.scrollHeight);
});

client1.js (Test client in console)

var io2 = require('socket.io-client');
var socket2 = io2.connect('http://localhost:8123');


var msg2 = "Greetings from client1";
socket2.emit('chat_message', msg2);


socket2.on('chat_message', function(msg){
	console.log('Received message from server:' + msg);
});

index.js (Electron initializer)

const electron = require('electron')
const app = electron.app
const path = require('path')
const BrowserWindow = electron.BrowserWindow
const url = require('url')

let mainWindow

function createWindow () {
	mainWindow = new BrowserWindow({
		width: 800, 
		height: 600, 
		transparent : true,
		frame:false
	})

	mainWindow.setAlwaysOnTop(true);

	mainWindow.loadURL(url.format({
		pathname: path.join(__dirname, 'index.html'),
		protocol: 'file:',
		slashes: true
	}))

	mainWindow.setIgnoreMouseEvents(true);
}

app.on('ready', createWindow)