Music Server with Group Listening

AKA "Listening Party"!

A .mp3 music file server with listening rooms for multiple clients to join, add to queue, skip songs, and listen to the same music. By sharing the unique room code, friends, family, and peers can join the room and have a Listening Party!

This is my senior project at NMU for the CS480 course.

Getting Started

Running Frontend - React

• Navigate into the src/main/js folder and run the command npm install.
• npm start - runs the React frontend. Navigate to localhost:3000 to see it.
  • Note: Safari may not allow auto-playing media by default, which is critical to the functionality of the music player. To enable on desktop, navigate to Safari > Preferences... > Websites > Auto-Play, and switch the project to "Allow All Auto-Play"

Running Backend - Spring Boot

• First time only: In the root directory, run the command ./gradlew clean build. This will install all necessary dependencies and run unit/integration tests.
  • Note: on Windows, the equivalent command is gradlew :bootRun
• ./gradlew :bootRun - starts the Spring Boot server. After compiling is done, the server will be listening on port 8080.
• Assuming that the frontend is already running, all requests to port 3000 will be proxied to port 8080 by React. Test that the frontend and backend are running as expected by navigating to localhost:3000/api/gms/hello in your browser or Postman. You should see a simple "hello" message with the current date and time.

Adding music

Put .mp3 music files into src/main/resources/music. The tracks are indexed during initial runtime, so a server restart is necessary if the files in the music directory change. The music can be in folders up to 2 directories deep. To clarify, the following music files would ALL be indexed:

1. music/song.mp3
2. music/folder1/song.mp3
3. music/folder1/folder2/song.mp3

Swagger Interactive Documentation

Once Spring Boot is running, the auto-generated interactive API documentation can be viewed at localhost:8080/swagger-ui.html.

If you prefer to use Postman instead, a Postman collection is available here: src/main/resources/group-music-server.postman_collection.json

Run in Production

Frontend - React

Running the React development server is not secure in a production environment, so setup is a little different to create a prod build.

1. Navigate into the src/main/js folder and execute the command npm run build. This will generate a static version of your React app with minified and hashed files for security and "aggressive caching".
2. Your production page will now be located in src/main/js/build. If any changes are made to the code base, make sure to run the build command again to re-generate the files in the build folder.
3. A static web server will be needed to serve this content. The server needs to support proxying WebSockets and HTTP requests to get the full functionality of the project.
   • Resources for setting up an Apache server on Linux:

     • Changing Document Root - make sure to set it to the path for your build folder

     • Proxying API calls to different port

         # Proxying api calls
         ProxyPreserveHost On
         ProxyPass /api/gms http://127.0.0.1:8080/api/gms
         ProxyPassReverse /api/gms http://127.0.0.1:8080/api/gms
       

     • Proxying WebSockets to different port

         # Proxying websocket - looking for upgrade request in header
         RewriteEngine On
         RewriteCond %{HTTP:Upgrade} =websocket [NC]
         RewriteRule /(.*)           ws://127.0.0.1:8080/$1 [P,L]
       

     • Default to using React's routing rather than Apache

         # Allow React to handle the routing
         RewriteEngine On
         RewriteCond %{REQUEST_FILENAME} -f [OR]
         RewriteCond %{REQUEST_FILENAME} -d
         RewriteRule ^ - [L]
         RewriteRule ^ index.html [L]
       

Backend - Spring Boot

Run the Spring Boot server as you would for development. The static web server will handle proxying to port 8080.

1. ./gradlew clean build - make sure that all dependencies are all installed and tests are passing
2. ./gradlew :bootRun - runs the server on port 8080

Technologies Used

• Frontend - React, generated by create-react-app
  • Websockets: @stomp/stompjs from npm (STOMP messaging over websockets)
• Backend - Spring Boot framework with Kotlin language and Gradle build tool
• Testing - Spock framework with Groovy language

Screenshots

Welcome page and lobby for joining listening rooms

---

The listening room, where users can play/pause, skip songs, and add to queue

---

The group music server also supports mobile listening