Electron gui refreshing when i click on a button


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



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

   <!doctype html>
        <title>Socket.IO chat</title>
          * { 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; }
        <ul id="messages"></ul>
        <form action="">
          <input id="m" autocomplete="off" /><button>Send</button>
        <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>
          var socket = io();
            socket.emit('chat message', $('#m').val());
            return false;
          socket.on('chat message', function(msg){

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


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?


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


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