title: Angular with Socket.io: Uncaught ReferenceError: WebSocket is not defined at Object../node_modules/engine.io-client/lib/transports/websocket.js
body: <p>I tried to implement Socket.io into my angular web application which is running in combination with a simple api server using express (after the example of <a href="https://blog.codewithdan.com/pushing-real-time-data-to-an-angular-service-using-web-sockets/" rel="nofollow noreferrer">THIS</a>). </p>
  
  <p>I start the server and client using <code>npm start</code> and <code>ng serve</code> in that order, but when I'm trying to access the application in my browser at <em>localhost:4200</em>, the developer console shows the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/RMeeF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RMeeF.png" alt="Error shown in Google Chrome developer console"></a></p>
  
  <p><strong>SERVER file structure:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/1IHXb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1IHXb.png" alt="enter image description here"></a></p>
  
  <p><strong>CLIENT file structure:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/jzpbE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jzpbE.png" alt="enter image description here"></a></p>
  
  <p><strong>www.js</strong> (main server file)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>#!/usr/bin/env node
  
  /**
   * Module dependencies.
   */
  const app = require('../app'),
        debug = require('debug')('angular-node-express-api:server'),
        http = require('http'),
        server = http.createServer(app),
        io = require('socket.io')(server);
  
  let timerId = null,
      sockets = new Set();
  
  // Run this on new Socket connection
  //
  io.on('connection', socket =&gt; {
  
    sockets.add(socket);
    console.log(`Socket ${socket.id} added`);
  
    if (!timerId) {
      startTimer();
    }
  
    socket.on('clientdata', data =&gt; {
        console.log(data);
    });
  
    socket.on('disconnect', () =&gt; {
      console.log(`Deleting socket: ${socket.id}`);
      sockets.delete(socket);
      console.log(`Remaining sockets: ${sockets.size}`);
    });
  
  });
  
  // Timer function for Socket IO, simulates changing data, pushing that data to connected clients.
  //
  function startTimer() {
    //Simulate stock data received by the server that needs
    //to be pushed to clients
    timerId = setInterval(() =&gt; {
      if (!sockets.size) {
        clearInterval(timerId);
        timerId = null;
        console.log(`Timer stopped`);
      }
      let value = ((Math.random() * 50) + 1).toFixed(2);
      //See comment above about using a "room" to emit to an entire
      //group of sockets if appropriate for your scenario
      //This example tracks each socket and emits to each one
      for (const s of sockets) {
        console.log(`Emitting value: ${value}`);
        s.emit('data', { data: value });
      }
  
    }, 2000);
  }
  
  /**
   * Get port from environment and store in Express.
   */
  
  var port = normalizePort(process.env.PORT || '3000');
  app.set('port', port);
  
  /**
   * Listen on provided port, on all network interfaces.
   */
  
  server.listen(port);
  console.log('Server is now listening on port ' + port);
  server.on('error', onError);
  server.on('listening', onListening);
  
  /**
   * Normalize a port into a number, string, or false.
   */
  
  function normalizePort(val) {
    var port = parseInt(val, 10);
  
    if (isNaN(port)) {
      // named pipe
      return val;
    }
  
    if (port &gt;= 0) {
      // port number
      return port;
    }
  
    return false;
  }
  
  /**
   * Event listener for HTTP server "error" event.
   */
  
  function onError(error) {
    if (error.syscall !== 'listen') {
      throw error;
    }
  
    var bind = typeof port === 'string'
      ? 'Pipe ' + port
      : 'Port ' + port;
  
    // handle specific listen errors with friendly messages
    switch (error.code) {
      case 'EACCES':
        console.error(bind + ' requires elevated privileges');
        process.exit(1);
        break;
      case 'EADDRINUSE':
        console.error(bind + ' is already in use');
        process.exit(1);
        break;
      default:
        throw error;
    }
  }
  
  /**
   * Event listener for HTTP server "listening" event.
   */
  
  function onListening() {
    var addr = server.address();
    var bind = typeof addr === 'string'
      ? 'pipe ' + addr
      : 'port ' + addr.port;
    debug('Listening on ' + bind);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>data.service.ts</strong> (socket service of the client, seen in the error message)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>console.log("At least you've tried.");
  import { Injectable } from '@angular/core';
  import { map, catchError } from 'rxjs/operators';
  import * as socketIo from 'socket.io-client';
  import { Socket } from '../shared/interfaces';
  import { Observer, Observable } from 'rxjs';
  
  declare var io : {
    connect(url: string): Socket;
  };
  
  @Injectable()
  export class DataService {
  
    socket: Socket;
    observer: Observer&lt;number&gt;;
  
    getQuotes() : Observable&lt;number&gt; {
      this.socket = socketIo('http://localhost:3000');
  
      this.socket.on('data', (res) =&gt; {
        this.observer.next(res.data);
      });
  
      return this.createObservable();
    }
  
    createObservable() : Observable&lt;number&gt; {
        return new Observable&lt;number&gt;(observer =&gt; {
          this.observer = observer;
        });
    }
  
    private handleError(error) {
      console.error('server error:', error);
      if (error.error instanceof Error) {
          let errMessage = error.error.message;
          return Observable.throw(errMessage);
      }
      return Observable.throw(error || 'Socket.io server error');
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>package.json</strong> (client)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
    "name": "ody-network-webui",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "proxy-start": "ng serve --proxy-config proxy.conf.json",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "~9.1.4",
      "@angular/cdk": "^9.2.2",
      "@angular/common": "~9.1.4",
      "@angular/compiler": "~9.1.4",
      "@angular/core": "~9.1.4",
      "@angular/forms": "~9.1.4",
      "@angular/localize": "~9.1.4",
      "@angular/material": "^9.2.2",
      "@angular/platform-browser": "~9.1.4",
      "@angular/platform-browser-dynamic": "~9.1.4",
      "@angular/router": "~9.1.4",
      "@ng-bootstrap/ng-bootstrap": "^6.1.0",
      "@types/express": "^4.17.6",
      "@types/fast-text-encoding": "^1.0.1",
      "@types/socket.io": "^2.1.4",
      "bootstrap": "^4.4.0",
      "core-js": "^3.6.5",
      "csvtojson": "^2.0.10",
      "ejs": "^3.1.2",
      "express-ejs-layouts": "^2.5.0",
      "fast-text-encoding": "^1.0.2",
      "rxjs": "^6.5.5",
      "socket.io": "^2.3.0",
      "socket.io-client": "^2.3.0",
      "tslib": "^1.10.0",
      "ws": "^7.2.5",
      "zone.js": "~0.10.2"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.901.4",
      "@angular/cli": "~9.1.4",
      "@angular/compiler-cli": "~9.1.4",
      "@angular/language-service": "~9.1.4",
      "@types/csvtojson": "^1.1.5",
      "@types/jasmine": "~3.5.0",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "^12.12.38",
      "@types/socket.io-client": "^1.4.32",
      "codelyzer": "^5.1.2",
      "jasmine-core": "~3.5.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~5.0.0",
      "karma-chrome-launcher": "~3.1.0",
      "karma-coverage-istanbul-reporter": "~2.1.0",
      "karma-jasmine": "~3.0.1",
      "karma-jasmine-html-reporter": "^1.4.2",
      "protractor": "~5.4.3",
      "ts-node": "~8.3.0",
      "tslint": "~6.1.0",
      "typescript": "~3.8.3"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Im pretty much lost on this problem, couldn't really find any solutions regarding this yet.</p>