Getting Started with Ionic 4 and Socket.io

In this tutorial we build a simple Ionic 4 chat using Sockets! Learn to build mobile apps with Ionic in my Ionic Academy: ionicacademy.com/
The training platform for everything Ionic. 40+ Ionic Courses, Ionic tutorials and private community to help you learn Ionic fast.
#############################
Want to read instead of watch? Here's the full tutorial: devdactic.com/...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.c...
#############################
You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
#############################

[@rollerflax555]

I'm learning English and you're the first youtuber that I can understand. Just that, a curiosity. Thanks for the video.

[@galaxies_dev]

Glad to hear that!

[@uzroot]

Thank you very much I was expecting this tutorial.

[@axrorabduganiyevich6667]

Woow great video Mr.Simon.

[@SinaAmini-hl1vo]

Very very good

[@mpakoenongeneivo]

please simon when i host my application on heroku, socket io stops working. what can i do to solve that issue.

[@patrickpalomares7257]

Hi simon, how did you do the "Open Editors" and "Socket server?"

[@Akeshma]

I'm looking for TCP socket connection in ionic angular.. any help please

[@felixsagno6965]

hello thank you for tutorial, i'm doing something similar to this, so i need help if possible, i have a ionic app that must listen to a port to receveive data from a web app and it has to take that data every time when it comes to the port and store it, and i don't know how to make my ionic app listening to port and receive the data .thank you in advance .

[@dennisxu7780]

The problem is that socket needs lots of resources, for example if you have 10000 users using socket, do you know how many resource needed?

[@graceamegboh9101]

hi Simon i am getting error saying: WARNING: This is a simple server for use in testing or debugging Angular applications [ng] locally. It hasn't been reviewed for security issues. [ng] Binding this server to an open connection can result in compromising your application or [ng] computer. Using a different host than the one passed to the "--host" flag might result in [ng] websocket connection issues. You might need to use "--disableHostCheck" if that's the [ng] case. [ng] i ｢wds｣: Project is running at 0.0.0.0:8100/webpack-dev-server/ [ng] i ｢wds｣: webpack output is served from / [ng] i ｢wds｣: 404s will fallback to //index.html

[@fatenrhaiem368]

Property 'fromEvent' does not exist on type 'Socket'. !!!!

[@argelpamintuango1956]

how possible to make websocket to some part of rest api if application is a .NET app?

[@jaiharshagottumukkala6538]

Superb tutorial ....

[@TheJou1001]

I couldn't make it work in android device. It works fine at web browser

[@techbuddiesit6330]

Very good tuts. You are master of ionic.

[@Prash3393]

Thanks Simon

[@tolutronics]

Great... Thanks Simon..

[@edwardramos2971]

Nice! Works for me!

[@jngomezd]

I have one app for clients (APP1), and other for servers (APP2). I want notify "especific" users, about related transactions. Questions: Need I other "server agent" to manage communications? Sockets is the best solution? Fifebase (FCM) apply? ¿Other Suggest?

[@jorgetawnan]

Very good! Thank you very much for your content. In Brazil, the IOnic community is still small. Can I do a real-time CHAT with more than one room?

[@galaxies_dev]

Yeah I think that should be possible, you just need to join them in your server into the same room with socket!

[@brownwolfgaming4773]

it's possible to using the socket event in service ? to get more clean code 🤔

[@galaxies_dev]

Yes definitely!

[@paragbhide1695]

Sir. I have build a huge social communication app on android and ios. I have one tense question, will this socket io work successfully on the scale. Even if messages are slow, still will it work successfully in ios and android.

[@rubentorres]

I want to develop a guitar tuner with ionic, how can I achieve it?

[@AmitKumar1995]

Hi Sir, I am creating video calling feature in ionic but I m unable to make call a person when he is not using his phone or app in background. I want to show calling screen with ringtone like whatsapp call, how can do it in ionic ?

[@kgermando]

Great! Thanks you!

[@yoppysantoso4276]

Hi Simon, I am new with ionic, but your tutorial help me to understand. with sockets, is possible for send / display image or video?

[@galaxies_dev]

I guess you could send the image blob data through your socket connection, but perhaps having a URL to the image to load from would be easier!

[@chiragjoshi3493]

hey simon great work but i'm getting error while i'm typing socket.username it's saying that proprty username does not exits on type 'Socket' please help me on this

[@axrorabduganiyevich6667]

Hi Simon. I have this problem, Can you help me? Refused to load the image 'localhost:8100/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback. localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)

[@Modady-games]

Welcome Sir, how can Ionic run on more than the Android version

[@chandratumuluri6447]

Hi Simon, I am using Ionic 6 (Capacitor 4) with ngx-socket-io and I keep getting CORS error (Origin 'capacitor://localhost' not allowed by Access-Control-Allow-Origin) though on the server-side "*" is given for Access-Control-Allow-Origin. Did you face this issue before? Appreciate your help.

[@galaxies_dev]

Maybe this guide from Ionic helps: ionicframework.com/docs/troubleshooting/cors

[@uzroot]

Now we should implement one to one conversation and history of chat saving. For having offline messages stored somewhere on server side for example redis or mongodb

[@galaxies_dev]

Yes you would have to connect a database to your server and save every message that is emitted. Then you can also have a route to load all past messages for a conversation!

[@pinyin1]

@@galaxies_dev how can you do that sir

[@manuelmariscal7286]

Hey Simon, recently did it but im facing the problem of CORS policy, i did it on Heroku, it's not the first time that i see that (situations on the past) maybe its some stupid thing that i'm forgeting, do you have any idea? Thank you so much

[@galaxies_dev]

With Node or Express you can easily add the CORS headers to your API using a package. You have to make your server CORS ready, the app can't do this in general!

[@murendeninemaheni4387]

Do you have anything on this using real database data from an API? How would one integrate it with my rest API

[@murendeninemaheni4387]

POST localhost:3000/socket.io/?EIO=3&transport=polling&t=NRJp-x8 400 (Bad Request) Any help will do. Followed Tut but I run page i get this

[@ersaurabher]

At which place do I save a message in MySQL using PHP ? I wish to save the message, i know how to do that but I am confused how to do it here, I mean when do I trigger that ?

[@galaxies_dev]

I would say when there's a new message send from the user (which you can catch in the socket functions before you emit it to a group)!

[@rakshay34]

Hi Simon, I followed the instructions here and it is working like a breeze for me on browser and ios devices. But strangely socket connection is not being established in android devices. Is there a fix for it?

[@galaxies_dev]

Most likely an issue that your server is not on https!

[@pinyin1]

how can you create privacy

[@MissileBoy]

Hello, thanks for this tutorial, this is working in a mobile application? I am migrating a web game with a node.js backend (very similar to this backend) to Ionic, but websockets is not working on android phones, I really dont know what i am doing wrong.

[@galaxies_dev]

It should work, yes. Did you use a secure HTTPS connection?

[@MissileBoy]

​@@galaxies_dev I used HTTPS in production and HTTP in localhost, but looks like definitivaly is a bug on my side as I reproducing the same behavior as a single web page, so is not a mobile app specific issue. I will check again my code, thanks!

[@ciro726]

But if I want to execute not in localhost but on a server online like myserver.com?

[@sunilmanipara7273]

Hii, when i can disconnection internet and again connect then socket connection is not connecting. if you know how to reconnect socket connection then please tell me. thank you!

[@galaxies_dev]

You can pass a manager object during initialisation where you can specify the disconnect and retry behaviour like described here: github.com/socketio/socket.io-client/blob/master/docs/API.md#new-managerurl-options

[@ersaurabher]

Hii please call me for custom work @ 9216142737

[@brixylive606]

is live streaming possible for socketio?

[@galaxies_dev]

Hmm I think it could be possible in a native app!

[@vajidali9764]

Hello team ionic today I am the first time in mac create a new project, Project is serve successful but I got an error to build apk please help Error is : You have been opted out of telemetry. To change this, run: cordova telemetry on. CordovaError: Promise rejected with non-error: 'xcode-select: error: tool \'xcodebuild\' requires Xcode, but active developer directory \'/Library/Developer/CommandLineTools\' is a command line tools instance ' at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:29:15) at process._tickCallback (internal/process/next_tick.js:68:7) [ERROR] An error occurred while running subprocess cordova. cordova build ios exited with exit code 1. Re-running this command with the --verbose flag may provide more information.

[@galaxies_dev]

Hey, I'm not part of the official Ionic company! But regarding your error, check out this fix: github.com/nodejs/node-gyp/issues/569

[@JavierRodriguez-co2mv]

'localhost:3001/socket.io/?EIO=3&transport=polling&t=NUh0gaT' from origin 'localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Can you help me please, Mr. Simon

[@galaxies_dev]

Then you have to add CORS support to your socket server!

[@marcelocch]

I have the exact same problem :( and adding cors to nodejs server wont fix it

[@JavierRodriguez-co2mv]

@@marcelocch I had to install a lower version of socket.io

[@marcelocch]

@@JavierRodriguez-co2mv what version did u install?

[@JavierRodriguez-co2mv]

@@marcelocch 2.0.0

[@axrorabduganiyevich6667]

Does this project work in real device?

[@galaxies_dev]

Yes it should, but of course you need to use the real URL of your server then and not just localhost.

[@axrorabduganiyevich6667]

@@galaxies_dev hm thank you.

[@pedrocarbon]

How can I host the socket.io part?

[@galaxies_dev]

For example on Heroku, but you can use all kind of hosting for your server if they allow NodeJs environments. But Heroku is my favorite.

[@aliazzoug4947]

please try to explain more slowly. It's hard to understand for beginners !

[@galaxies_dev]

Will do Ali, sorry!

[@aneeshbhat28]

super

[@nmanikiran]

Group chat Create a group -> add / invite members A basic Skype clone 🤔

[@galaxies_dev]

Yeah that would be a good tutorial indeed!