SSE, Websocket, WebRTC & Web Transport - atabegruslan/Notes GitHub Wiki
- https://www.youtube.com/watch?v=1cFyfT0m3bA
- https://www.youtube.com/watch?v=4HlNv1qpZFY
- https://www.youtube.com/watch?v=6QnTNKOJk5A
Some Websocket libraries are built atop those async technologies
- Build atop Websockets
- https://socket.io/docs/v4
- https://socket.io/docs/v4/client-socket-instance
https://gist.github.com/atabegruslan/78690f99b0c9994c1938ef9845f1096f
Backend
const socketIo = require("socket.io")(server);
socketIo.on("connection", (socket) => {
// Here you have
// socket.handshake.query POSTMAN params
// socket.handshake.headers POSTMAN headers
// socket.handshake.auth Not supported in POSTMAN yet, but can via code. https://stackoverflow.com/a/70975533
Frontend
const socket = io.connect('https://{domain}',{
auth: {
username, password
}
})
https://viblo.asia/p/authentication-cho-socketio-maGK78n9Zj2
- https://tsh.io/blog/php-websocket (GOOD)
- https://dev.to/robertobutti/websocket-with-php-4k2c
- https://stackoverflow.com/questions/14512182/how-to-create-websockets-server-in-php
- Ably
- Pusher
- Laravel Websockets (free Pusher, made obsolete by Reverb): https://github.com/Ruslan-Aliyev/laravel-websockets
- Reverb (built atop ReactPHP)
- Echo
- Soketi
Chat normally relies on Websockets
Examples
- PHP, Ratchet: https://github.com/Ruslan-Aliyev/chat-php-ratchet
- Laravel Websockets: https://medium.com/@lfoster49203/building-real-time-applications-with-laravel-and-websockets-1f0e4465ef3a
- Laravel Chatify: https://www.youtube.com/watch?v=9tj7sz-JF3Q
- Node, WebSocket: https://github.com/Ruslan-Aliyev/chat-NodeJS-WebSocket
- Node, socket.io: https://github.com/Ruslan-Aliyev/chat-NodeJS-SocketIo
- Node, React, socket.io: https://github.com/Ruslan-Aliyev/chat-NodeJS-ReactJS-SocketIo
- Strapi v4, React, socket.io: https://github.com/Ruslan-Aliyev/chat-Strapi-ReactJS-SocketIo
- Node, React Native, socket.io: https://github.com/Ruslan-Aliyev/chat-NodeJS-ReactNative-SocketIo
- Strapi v4, React Native, socket.io: https://github.com/Ruslan-Aliyev/chat-Strapi-ReactNative-SocketIo
- Java: https://github.com/Ruslan-Aliyev/chat-java
- Express, React, socket.io: https://www.freecodecamp.org/news/build-a-realtime-chat-app-with-react-express-socketio-and-harperdb
- Zendesk: https://developer.zendesk.com/documentation/apps/build-an-app/build-your-first-chat-app/part-1-laying-the-groundwork
Ones that don't rely on Websockets
- PHP, AJAX: https://gist.github.com/atabegruslan/0cc6e074dc3f8709e17aa2e63e1520dd
- RabbitMQ & PHP: https://github.com/Ruslan-Aliyev/chat-php-rabbitmq
- stun.l.google.com: 19302
- stun1.l.google.com: 19302
- stun2.1.google.com: 19302
- stun3.l.google.com: 19302
- stun4.l.google.com: 19302
- stun01.sipphone.com
- stun.ekiga.net
- stun.fwdnet.net
See: https://github.com/Ruslan-Aliyev/WebRTC_Plain_JS
See also: https://www.youtube.com/watch?v=k3qx7-5_Tjk
Other helpful tutorials:
- https://www.youtube.com/watch?v=WmR9IMUD_CY
- https://www.youtube.com/watch?v=SsN4gl_wV_8&list=PLsOU6EOcj51fvJK7Z5sb5qM57NU8vYhTy
-
Using the
simple-peer
library: -
Using the
peerjs
library: -
Other libraries: https://www.quora.com/Which-is-the-best-WebRTC-JavaScript-library-PeerJS-or-EasyRTC
-
WebRTC & React Native:
- Using the Daily Co platform: https://www.daily.co
- Other platforms: https://www.zegocloud.com/blog/webrtc-api
Comparing pure WebRTC to a WebRTC platform: https://www.videosdk.live/webrtc-vs-daily
- Tutorials:
- Support:
- Requires:
- In plain HTML & JS:
<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
- In HTML and NPM:
@daily-co/daily-js
- In plain HTML & JS:
- Examples
- Daily-Co in HTML & JS: https://gist.github.com/atabegruslan/99768ea0d4ce979716511a33676eb841
- Daily-Co in HTML & NPM: https://gist.github.com/atabegruslan/7e4e2a21ea27325e334febf11be4068d
- Documentations:
- https://www.npmjs.com/package/@daily-co/daily-js/v/0.9.4-beta.1
- https://docs.daily.co/reference/daily-js
- Daily's Prebuild: https://docs.daily.co/guides/products/prebuilt
- So with Prebuild, use
callFrame
https://docs.daily.co/reference/daily-js/factory-methods/create-frame - and with non-Prebuild, it all revolves around
callObject
https://docs.daily.co/reference/daily-js/factory-methods/create-call-object
- So with Prebuild, use
- Tutorials:
- Common problems:
- https://www.youtube.com/watch?v=EukhMNNosXw
- https://www.daily.co/blog/deploy-a-daily-co-backend-node-js-server-instantly/
- Requires:
"@daily-co/daily-js": "^0.73.0",
-
"@daily-co/daily-react": "^0.22.0",
- Examples
- Good Demo:
- Tutorials:
- Common problems:
-
Uncaught Error: Duplicate DailyIframe instances are not allowed
, which is because React renders one of these functions multiple times:Daily.createCallObject
orDaily.createFrame
- In React Prebuild, use: https://docs.daily.co/reference/daily-react/use-call-frame
- In React non-Prebuild,
<DailyProvider dailyConfig={} startCameraOff=false startMicOff=false />
intrinsically takes care of that. https://docs.daily.co/reference/daily-react/daily-provider (PS: This ONLY works on React, not React Native)
-
- Requires:
"@config-plugins/react-native-webrtc": "^8.0.0",
"@daily-co/config-plugin-rn-daily-js": "^0.0.5",
-
"@daily-co/react-native-daily-js": "^0.70.0",
"@daily-co/react-native-webrtc": "118.0.3-daily.2",
- Examples:
- Good Demo:
- Tutorials: