Electron gui refreshing when i click on a button


#1

I am using socket.io with electron to create a IM-client.
I followed this tutorial IM-clinet Tutorial from sockiet.io. and everything runs perfectly when i run the server and access my html file on local host.

However, when I tried to migrate the code to Electron, i managed to Load the page in the gui(or chrome ?) of electron, however, when i write a message and click send, the page (of the gui) refreshes and does not transfer the message to the server.

My electron code:

const electron = require('electron');
const {app} = electron;
const {BrowserWindow} = electron;



app.on('ready', function() {

  var  mainWindow = new BrowserWindow({
        height: 600,
        width: 500,
        darkTheme: true
    });

     mainWindow.loadURL('http://127.0.0.1:3000/?');


   });

And this is my html code (where i use the Socket.io library to emit a message)

   <!doctype html>
    <html>
      <head>
        <title>Socket.IO chat</title>
        <style>
          * { margin: 0; padding: 0; box-sizing: border-box; }
          body { font: 13px Helvetica, Arial; }
          form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
          form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
          form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
          #messages { list-style-type: none; margin: 0; padding: 0; }
          #messages li { padding: 5px 10px; }
          #messages li:nth-child(odd) { background: #eee; }
        </style>
      </head>
      <body>
        <ul id="messages"></ul>
        <form action="">
          <input id="m" autocomplete="off" /><button>Send</button>
        </form>
        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
          var socket = io();
          $('form').submit(function(){
            socket.emit('chat message', $('#m').val());
            $('#m').val('');
            return false;
          });
          socket.on('chat message', function(msg){
            $('#messages').append($('<li>').text(msg));
          });
        </script>
      </body>
    </html>

Electron version: “electron-prebuilt”: "~1.2.6"
Operating system: Elementary OS Freya


#2

How are you triggering the send of the message? Are you clicking a button? Could that be redirecting/reloading the page? Since you’re using socket.io… if you hard code an emit event to send a message (maybe even use a setTimeout to delay it), does that work?


#3

I added the html doc which i am using(and gets rendered in electron). Basically it emits “chat message” to the server.


#4

Its the way you’re loading jQuery. It’s known to cause issues with Electron. Install jQuery with npm

npm i --save jquery

Then, where you load the jQuery library, replace it with…

<script>window.$ = window.jQuery = require('jquery')</script>

If you open dev tools within electron, beforehand, you should have an error

Uncaught ReferenceError: $ is not defined