CODEWITHSUNDEEP
javascriptnode.jssocket.io
Gudarzi
Gudarzi

Reputation: 575

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

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?

Upvotes: 6

Views: 13572

Answers (4)

1337 ymoukhli
1337 ymoukhli

Reputation: 11

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));

Upvotes: 1

aris
aris

Reputation: 597

<!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);

Upvotes: 0

Noob
Noob

Reputation: 2807

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()

Upvotes: 3

Aritra Chakraborty
Aritra Chakraborty

Reputation: 12542

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.

Upvotes: 3

Related Questions