Where is the socket.io client library?

Question

As far as I have seen, there is no explanation as to where we are to locate the client side script for socket.io if node.js is not used as the web server. I've found a whole directory of client side files, but I need them in a combined version (like it's served when using node.js webs servers). Any ideas?

Matt Way · Answer 1 · 2016-03-24T23:59:33.733

172

The best way I have found to do this is to use bower.

bower install socket.io-client --save

and include the following in your app's HTML:

<script src="/bower_components/socket.io-client/socket.io.js"></script>

That way you can treat the socket.io part of your client the same way you treat any other managed package.

edited Mar 24 '16 at 23:59

answered Nov 18 '13 at 07:09

Matt Way

32,319
10
79
85

5

This is the best solution, thanks! In case this helps anyone else, the minified socket.io client is located in `bower_components/socket.io-client/dist/socket.io.min.js` – mikermcneil Mar 12 '14 at 11:56
5

bower ftw. – Connor Leech Jul 08 '14 at 20:49
Running "bowerInstall:target" (bowerInstall) task socket.io-client was not injected in your file. Please go take a look in "client/bower_components/socket.io-client" for the file you need, then manually include it in your file. – smk Aug 18 '14 at 03:19
This installed the library nicely, but it's missing a bower.json as far as I can tell. My gulp step that auto-concatenates bower libraries ('main-bower-files') doesn't pull it in. – Dave Ceddia Jul 20 '15 at 18:13
I checked `bower info socket.io-client`, and it looks like it was registered to bower without a bower.json (so a default was created in the bower repo). You could either fork the project, create a bower.json, and register your own bower version. Create a pull request containing a bower.json. Create an issue and see if a contributor can create it. – Matt Way Jul 20 '15 at 23:26
Great work boys. Up and running in just seconds with this answer. – Anthony Nov 23 '15 at 00:29
Geez, that `-client` was everything for me. I was just doing `bower install socket.io --save`. – tscizzle Mar 12 '16 at 01:13
`bower install socket.io-client --save` Why Bower require credentials to my GitHub account to download socketio client? I can install other packages no problem, but this one needs my password for GitHub... – Wojciech Bednarski Apr 23 '16 at 19:51

score 68 · Accepted Answer · edited Jan 22 '12 at 01:02

68

socket.io.js is what you're going to put into your client-side html. Something like:

<script type="text/javascript" src="socket.io.js"></script>

my script is located:

/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js

copy that file to where you want your server to serve it.

edited Jan 22 '12 at 01:02

andrewrk

30,272
27
92
113

answered Dec 16 '11 at 02:57

EhevuTov

20,205
16
66
71

4

Awesome, thanks. Couldn't figure out where in that mess of directory structure that file was :) – Braun Shedd Dec 16 '11 at 02:59
4

Yeah, it's not that logical. A lot of people using socket.io ask that. All the best :-) – EhevuTov Dec 16 '11 at 05:56
4

Thanks man! It's weird that there's no information about that in the docs or samples. – Peter Nov 28 '12 at 18:28
2

https://github.com/LearnBoost/Socket.IO/wiki/How-do-I-serve-the-client – Dmitry Jun 12 '13 at 00:36
Please do not do that, use below solution – Dmitry Jul 02 '13 at 03:43
1

@dVaffection This does only work if the web app and socket.io are on the same server and port. – Jo David Aug 30 '13 at 08:39

score 25 · Answer 3 · edited Jan 27 '16 at 20:20

25

I think that better and proper way is to load it from this url

src="/socket.io/socket.io.js"

on the domain where socket.io runs. What is positive on this solution is that if you update your socket.io npm module, your client file gets updated too and you don't have to copy it every time manually.

edited Jan 27 '16 at 20:20

Uli Köhler

13,012
16
70
120

answered Apr 07 '13 at 10:46

Capaj

4,024
2
43
56

1

This is the best answer IMO. It is the recommended usage of the client-side include from Socket.IO documentation. It just explains where it comes from, along with the advantages @Capaj mentioned. – Fernando Piancastelli Apr 27 '13 at 20:03
15

This is only the best solution IF Node.js serves the website where you want the connection to happen. That's a really big 'IF'. – Jo David Aug 30 '13 at 08:37

score 8 · Answer 4 · answered Jul 20 '15 at 18:29

I used bower as suggested in Matt Way's answer, and that worked great, but then the library itself didn't have its own bower.json file.

This meant that the bower-main-files Gulp plugin that I'm using to find my dependencies' JS files did not pull in socket.io, and I was getting an error on page load. Adding an override to my project's bower.json worked around the issue.

First install the library with bower:

bower install socket.io-client --save

Then add the override to your project's bower.json:

"overrides": {
  "socket.io-client": {
    "main": ["socket.io.js"]
  }
}

K. D. · Answer 5 · 2017-06-02T08:33:18.870

6

For everyone who runs wiredep and gets the "socket.io-client was not injected in your file." error:

Modify your wiredep task like this:

wiredep: {
  ..
  main: {
    ..
    overrides: {
      'socket.io-client': {
        main: 'socket.io.js'
      }
    }
  }

edited Jun 02 '17 at 08:33

answered Nov 07 '14 at 12:52

K. D.

4,041
9
48
72

@k-d This solved it, but why is that? what doesn't happen by default with `socket.io-client`? – Nitzan Nov 12 '14 at 17:18
Because they do not want to support bower. – K. D. Nov 13 '14 at 08:57

score 2 · Answer 6 · answered May 06 '14 at 00:46

If you are using bower.json, add the socket.io-client dependency.

"socket.io-client": "0.9.x"

Then run bower install to download socket.io-client.

Then add the script tag in your HTML.

<script src="bower_components/socket.io-client/dist/socket.io.min.js"></script>

score 2 · Answer 7 · answered Feb 09 '15 at 17:52

2

I have created a bower compatible socket.io-client that can be install like this :

bower install sio-client --save

or for development usage :

bower install sio-client --save-dev

link to repo

answered Feb 09 '15 at 17:52

Sina Sharafzadeh

93
2
7

Will you release any updates? socketio is on 1.3.5 now. Yours is very slow and clunky for some reason. – if __name__ is None Mar 24 '15 at 14:47
Maybe there's a way to automate the update of the bower client version ? – Diogyn Aug 11 '17 at 00:49

score 0 · Answer 8 · answered Sep 30 '15 at 12:54

if you use https://github.com/btford/angular-socket-io make sure to have your index.html like this:

<!-- https://raw.githubusercontent.com/socketio/socket.io-client/master/socket.io.js -->
<script src="socket.io.js"></script>

<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- ...... -->
<script src="bower_components/angular-socket-io/socket.js"></script>
<!-- endbower -->
<!-- endbuild -->



<script type="text/javascript" charset="utf-8">
   angular.module('myapp', [
// ...    
'btford.socket-io'
]);

// do your angular/socket stuff
</script>

Where is the socket.io client library?

8 Answers8

Linked