Websocket
The websocket was a struggle. It definitely took me the longest to get working and I may have been in a little over my head. However, after probably around 11 hours of work, I got the websocket functional.
- The first thing I did was update the configuration files and create a branch for my websocket. Here is the commit for that.
- Then my first websocket didn’t work and after not being able to figure it out for a few hours I started over from the beginning and followed a different video tutorial.
- Then I realized the issue was CORS allowed origins, and after not being able to figure out why the header had a duplicate “allowed-origins” entry, I asked Rohan Juneja and he helped me figure it out. Turns out the origins were defined within the nginx configuration and within the backend.
- Eventually I got it all working. Below are a few of the java files from my websocket.
package com.nighthawk.spring_portfolio.chat;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class ChatMessage { // Each message is an object. The methods are automatically generated using the above headers.
private String content;
private String sender;
private MessageType type;
}
package com.nighthawk.spring_portfolio.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.server.HandshakeInterceptor;
import org.springframework.web.socket.server.standard.TomcatRequestUpgradeStrategy;
import org.springframework.web.socket.server.support.DefaultHandshakeHandler;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{
public void registerStompEndpoints(StompEndpointRegistry registry) { //defines the websocket endpoint
registry.addEndpoint("/ws")
.setAllowedOrigins("https://nighthawkcoders.github.io", "https://cj-backend.stu.nighthawkcodingsociety.com","http://localhost:4000", "https://toby-leeder.github.io", "https://classroomjukebox.com/")
.withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry){ //defines the mesage broker which directs messages to the different destinations or listeners
registry.setApplicationDestinationPrefixes("/app");
registry.enableSimpleBroker("/topic");
}
}
Spotify API
The other major part of the project I worked on was the spotify api. This had me learning more about authentication methods. This part was much smoother than the websocket so honestly it’s not as interesting, but essentially you create a unique code and then use that code in a fetch request to the Spotify API to verify that you can use the spotify login, which the user then completes which sends an authorization token back through the frontend.
Search Page
I also created the search page here.
Reflections
- I should have asked for help sooner. As soon as I showed my bug to Rohan he told me he had already seen it and was able to fix it really quickly.
- I needed to step up even though I wasn’t the leader. I made the same mistake I made before and implemented systems without ensuring that people use them. We also didn’t have clear expectations for how the actual project would function, just an idea.
- I should have utilized my blog better to take notes throughout rather than mainly retrospective notes.
Student Teaching Grades:
Unit | Grade |
---|---|
Unit 1 | 0.91 |
Unit 2 | 0.9 |
Unit 3 | NA (group did it) |
Unit 4 | NA (group did it) |
Unit 5 | 0.9 |
Unit 6 | 0.85 |
Unit 7 | 0.9 |
Unit 8 | 0.91 |
Unit 9 | 0.91 |
Unit 10 | 0.95 |