Using web-sockets with Angular4?

Question

How can I use web-sockets with Angular4? The HttpModule does not support it, so is there a NPM package available that I can use?

Set Up:

.NET Core Web API for API access
List item

MS SQL DB for the database

Because new WebSocket('http://www.example.com') doesn't need a module. — Reactgular
– Reactgular, Commented Jul 1, 2017 at 3:18

Yakov Fain · Accepted Answer · 2017-06-30 19:23:10Z

5

Angular doesn't offer a special object to support WebSockets. But the good news is that WebSocket is supported by all browsers, and you can use it in your Angular4 apps. In this app I was using the ws package on the server (Node.js)and the browser's WebSocket object on the client (see https://github.com/Farata/angular2typescript/blob/master/Angular4/auction/client/src/app/product-detail/websocket.service.ts)

answered Jun 30, 2017 at 19:23

Yakov Fain

12.4k5 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim Consolazio · Accepted Answer · 2017-06-30 19:09:53Z

2

One option, you can always use Firebase (this btw is a very interesting option). Pretty much does all the heavy lifting for you.

Otherwise, WebSockets is an HTML5 standard. You just have to write up some code to implement it. Check out this website which has all kinds of info, an echo demo/test, etc:

https://www.websocket.org/

answered Jun 30, 2017 at 19:09

Tim Consolazio

4,8882 gold badges21 silver badges29 bronze badges

2 Comments

wonderful world Over a year ago

My backend database is MS SQL DB, not Firebase.

Tim Consolazio Over a year ago

That really doesn't matter. I've integrated Firebase login and push into apps without using it as my database. But that aside, web sockets isn't really complicated to implement at all, you could easily create a module/service. Again check out websocket.org. You still have to do the backend work, but again there's all kinds of packages out there for that, python etc.

Z. Bagley · Accepted Answer · 2017-06-30 19:34:12Z

1

You can use the socket.io-client, just be sure to include the typings when installing.

https://www.npmjs.com/package/socket.io-client

Install: npm install --save socket.io-client

and

npm install --save @types/socket.io-client or npm install --save-dev @types/socket.io-client

note: There's a great tutorial that includes guidance for a MEAN full-stack environment here if interested.

edit: As others have mentioned WebSocket is an HTML5 standard. This will simply create an easy to use interface for front-end socket interactions and is applicable for any back-end environment.

edited Jun 30, 2017 at 19:34

answered Jun 30, 2017 at 19:19

Z. Bagley

9,2681 gold badge44 silver badges55 bronze badges

Comments

jomalone_jia · Accepted Answer · 2017-11-01 08:58:25Z

0

i use angular2-websocket/angular2-websocket in my angular project, and it work very well https://github.com/afrad/angular2-websocket

answered Nov 1, 2017 at 8:58

jomalone_jia

531 silver badge6 bronze badges

1 Comment

Vidhi Dave Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.

Collectives™ on Stack Overflow

Using web-sockets with Angular4?

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related