A server & client application to play Youtube videos in sync on multiple devices at the same time. Built with React, Redux, Node.js & Socket.IO. Try the live demo.
- React (Create-React-App)
- React-Redux
- React-Router
- React-player
- Redux-socket.io
- Debug
- Seamless-immutable
- Node.js
- Socket.io
- Express
- Heroku
$ git clone https://github.com/brambo48/react-youtube-sync.git
$ cd react-youtube-sync
$ npm install
$ npm start
Command | Description |
---|---|
npm start | Start webpack development server @ localhost:3000 && Node.js backend server @ localhost:3001 |
npm run build | Build frontend production bundles to ./build directory |
npm run start-prod | Start Node.js production server @ localhost:3001 and use Express to serve frontend build artifacts from ./build directory |
react-youtube-sync
consists of a client and a server application, which together make it possible to watch any Youtube video in synchronicity across multiple devices. When the user of one device plays, pauses or forwards the video this action will also happen on all the other connected devices.
The frontend is built using React (create-react-app) and Redux (to manage it's state). It communicates with the Node.js backend side of the application through websockets. Through the use of websockets, the backend can easily broadcast the actions (play, pause, forward) of one user to all other connected users without the need for each user to refresh the page. This communication between users and the server keeps the videoplayer of all users in a group in sync.
When a user pauses, plays or forwards a video, this action is emitted to the server. The server then broadcasts this action to all other connected users. Upon receiving an action from the server, the client processes this action and updates the playerState accordingly (i.e. from 'playing' to 'paused').
As noted earlier, the frontend of React-youtube-sync
uses Redux to manage it's state by dispatching actions. To prevent having two ‘kind’ of actions (websocket events and redux actions) flying all over we use a middleware called redux-socket.io that interprets these websocket events as redux actions for us.
By initializing this middleware with a 'prefix' parameter:
const socketIoMiddleware = createSocketIoMiddleware ( socket, 'WS_TO_SERVER_' );
all redux actions that have an action.type
prefixed with 'WS_TO_SERVER_'
will now , upon dispatching, automatically be sent to our backend through websockets.
On the other hand, all events with type action
that are emitted by the server will automatically be picked up by the receiving clients' middleware and interpreted as a Redux action. For example:
// On the server
socket.emit('action', {type:'SET_PLAYER_STATE', payload:'playing'});
will be interpreted and dispatched as a redux action upon receiving by the client. Resulting in the matching reducer for action type SET_PLAYER_STATE
taking care of the state change on the clientside.
Prerequisites: basic knowledge of Heroku.
Setup your Heroku account and Heroku CLI
For installing the CLI tool, see this article.
1. Create the Heroku app
heroku apps:create react-youtube-sync-test
2. Push to Heroku
git push heroku master
Heroku will give you a link at which to view your live app.