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)

#2

Considering your server.js as the main file, The syntax for socket IO is fine.

var io = require('socket.io').listen(8899); 

This goes inside the create window method of electron js main file (Server.JS in your case)

  io.sockets.on('connection', function (socket) {// WebSocket Connection
  
  socket.on('socket-data', function(data) { //get light switch status from client
      socket.emit('socket-data', data); //send button status to client
      console.log(data);  
  });

});

My index html has this code. Try using this to test the basic connection and replace your code. Hope this helps

<div id="socket-status"></div>
<input type="checkbox" id="socket-test">

<script>
  // You can also require other files to run in this process
  require('./renderer.js')

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

   window.addEventListener("load", function(){ //when page loads
    
       var socket_data_ = document.getElementById("socket-test"); 
        socket_data_.addEventListener("change", function() { 
          socket.emit("socket-data", Number(this.checked)); 
        });

   });



  socket.on('socket-data', function (data) { //get button status from client
      
    var socket_status_ = document.getElementById("socket-status"); 
    socket_status_.innerHTML = data;    

  });

</script>