How to import socket.io from client-side in vanilla javascript?

user_7721866 0
Viewed 7463

The official documentation of socket.io has an example of importing and using socket.io from client-side like this:

index.html 

<body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    $(function () {
      var socket = io();
      // Some other code in here...
    });
  </script>
</body>

Now I'm trying to put my js code inside a main.js file (beside index.html in public folder). This is what I do which gives me Unexpected identifier:

main.js

import io from "../socket.io/socket.io.js"
const socket = io()
// Some other code here...

What is the right form of importing socket.io in this case?

socket.io node.js javascript
4 Answers

There are multiple ways, The simplest one:

You can just use a socket.io-client CDN or serve from the dist folder socket.io-client github repository. It will add the io object to window. Which baically means that io will be a global variable that you can use.

You need to add it to your html page using the script tag.

and you can use it as:

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
    var socket = io('http://localhost');
      socket.on('news', function (data) {
        console.log(data);
        socket.emit('my other event', { my: 'data' });
    });
</script>

Or, You can use webpack or browserify to build the JS file and import THAT in your index.html. You can check out examples here

Why import doesn't work?

Because import is an ES6 operator. And browsers out of the box don't support that. Heck, even node doesn't support import and export. That's why you need to transpile(convert) them to ES5 syntaxes so that even browsers can run it. You can check out the trusty Babel REPL and convert Es6 to Es5 yourself to get the feel.

user_12038440

You can do this:

Putting this in your index.html : 

<body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="main.js">
  // some code here...
</body>

And putting this in your main.js : 

var socket = io()

user_75374540 
<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.4/socket.io.js"> 
    </script>
    <script>
        var socket = io(SOCKET_ENDPOINT);
user_100464750

if you follow socket.io documentation you should just add these lines

  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="main.js"></script>
</html>

and make sure to add these lines to your index.js

const path = require("path"); app.use(express.static(__dirname));

user_130393130
Related