LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Render chat messages that come over the socket

Browse Source
This commit is contained in:
Gabe Kangas 2022-05-03 13:01:50 -07:00
parent 15becc5121
commit 8b07eb7457
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
5 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/chat/server.go
View File

@ -183,7 +183,12 @@ func (s *Server) HandleClientConnection(w http.ResponseWriter, r *http.Request)
_, _ = w.Write([]byte(events.ErrorMaxConnectionsExceeded)) _, _ = w.Write([]byte(events.ErrorMaxConnectionsExceeded))
return return
} }
upgrader.CheckOrigin = func(r *http.Request) bool { return true }
// To allow dev web environments to connect.
upgrader.CheckOrigin = func(r *http.Request) bool {
return true
}
conn, err := upgrader.Upgrade(w, r, nil) conn, err := upgrader.Upgrade(w, r, nil)
if err != nil { if err != nil {
log.Debugln(err) log.Debugln(err)

8
web/components/stores/ClientConfigStore.tsx
View File

@ -63,7 +63,7 @@ export function ClientConfigStore() {
const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom); const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom);
const setChatVisibility = useSetRecoilState<ChatVisibilityState>(chatVisibilityAtom); const setChatVisibility = useSetRecoilState<ChatVisibilityState>(chatVisibilityAtom);
const setChatState = useSetRecoilState<ChatState>(chatStateAtom); const setChatState = useSetRecoilState<ChatState>(chatStateAtom);
const setChatMessages = useSetRecoilState<ChatMessage[]>(chatMessagesAtom); const [chatMessages, setChatMessages] = useRecoilState<ChatMessage[]>(chatMessagesAtom);
const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom); const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
const [appState, setAppState] = useRecoilState<AppState>(appStateAtom); const [appState, setAppState] = useRecoilState<AppState>(appStateAtom);
const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom); const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom);
@ -106,7 +106,7 @@ export function ClientConfigStore() {
handleConnectedClientInfoMessage(message as ConnectedClientInfoEvent); handleConnectedClientInfoMessage(message as ConnectedClientInfoEvent);
break; break;
case SocketMessageType.CHAT: case SocketMessageType.CHAT:
handleChatMessage(message as ChatEvent); handleChatMessage(message as ChatEvent, chatMessages, setChatMessages);
break; break;
default: default:
console.error('Unknown socket message type: ', message.type); console.error('Unknown socket message type: ', message.type);
@ -116,8 +116,8 @@ export function ClientConfigStore() {
const getChatHistory = async () => { const getChatHistory = async () => {
try { try {
const messages = await ChatService.getChatHistory(accessToken); const messages = await ChatService.getChatHistory(accessToken);
// console.log(`ChatService -> getChatHistory() messages: \n${JSON.stringify(messages)}`); const updatedChatMessages = [...messages, ...chatMessages];
setChatMessages(messages); setChatMessages(updatedChatMessages);
} catch (error) { } catch (error) {
console.error(`ChatService -> getChatHistory() ERROR: \n${error}`); console.error(`ChatService -> getChatHistory() ERROR: \n${error}`);
} }

15
web/components/stores/eventhandlers/handleChatMessage.ts
View File

@ -1,8 +1,11 @@
import { import { ChatMessage } from '../../../interfaces/chat-message.model';
ChatEvent, import { ChatEvent } from '../../../interfaces/socket-events';
SocketEvent,
} from '../../../interfaces/socket-events';
export default function handleChatMessage(message: ChatEvent) { export default function handleChatMessage(
console.log('chat message', message); message: ChatEvent,
messages: ChatMessage[],
setChatMessages,
) {
const updatedMessages = [...messages, message];
setChatMessages(updatedMessages);
} }

4
web/services/websocket-service.ts
View File

@ -1,8 +1,6 @@
import { message } from 'antd'; import { message } from 'antd';
import { SocketMessageType } from '../interfaces/socket-events'; import { SocketMessageType } from '../interfaces/socket-events';
interface SocketMessage { interface SocketMessage {
type: SocketMessageType; type: SocketMessageType;
data: any; data: any;
@ -61,7 +59,7 @@ export default class WebsocketService {
// On ws error just close the socket and let it re-connect again for now. // On ws error just close the socket and let it re-connect again for now.
onError(e) { onError(e) {
console.error(e) console.error(e);
handleNetworkingError(`Socket error: ${e}`); handleNetworkingError(`Socket error: ${e}`);
this.websocket.close(); this.websocket.close();
// if (!this.isShutdown) { // if (!this.isShutdown) {