Toggle navigation
Toggle navigation
This project
Loading...
Sign in
강동현
/
nodejs-game
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
Overnap
2021-06-06 01:40:34 +0900
Browse Files
Options
Browse Files
Download
Plain Diff
Commit
3fd2bc51bfd323afcc69032567ed6c1e64383909
3fd2bc51
2 parents
34c44f47
5dc8bb30
Builds for 1 pipeline
failed
in 1 minute 19 seconds
Merge branch 'feature/server-connection' into develop
Changes
4
Builds
3
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
32 additions
and
14 deletions
web/src/components/common/types.ts
web/src/components/rooms/RoomBlock.tsx
web/src/pages/Login.tsx
web/src/pages/Rooms.tsx
web/src/components/common/types.ts
View file @
3fd2bc5
...
...
@@ -4,10 +4,15 @@ export interface MessageResponse<T> {
result
?:
T
;
}
export
interface
RawMessage
{
type
:
string
;
message
:
any
;
}
export
const
MessageType
=
{
LOGIN
:
"login"
,
ROOM_LIST_REQUEST
:
"room
_list_reque
st"
,
ROOM_JOIN
:
"
room_join
"
,
ROOM_LIST_REQUEST
:
"room
Li
st"
,
ROOM_JOIN
:
"
joinRoom
"
,
ROOM_LEAVE
:
"room_leave"
,
ROOM_USER_UPDATE
:
"room_user_update"
,
ROOM_CHAT
:
"room_chat"
,
...
...
web/src/components/rooms/RoomBlock.tsx
View file @
3fd2bc5
import React, { useContext } from 'react';
import React, { useC
allback, useC
ontext } from 'react';
import { useHistory } from 'react-router';
import SocketContext from '../../contexts/SocketContext';
import { MessageResponse, MessageType } from '../common/types';
import { MessageResponse, MessageType
, RawMessage
} from '../common/types';
import { RoomData } from '../room/types';
import { Room } from './types';
...
...
@@ -12,9 +12,13 @@ interface RoomBlockProps {
export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
const history = useHistory();
const socket = useContext(SocketContext);
const joinRoom = () => {
const joinRoom =
useCallback(
() => {
if (room.currentUsers < room.maxUsers) {
socket.emit(MessageType.ROOM_JOIN, (response: MessageResponse<RoomData>) => {
const rawMessage: RawMessage = {
type: MessageType.ROOM_JOIN,
message: { uuid: room.uuid }
}
socket.emit('msg', rawMessage, (response: MessageResponse<RoomData>) => {
if (response.ok) {
history.push({
pathname: '/' + room.uuid,
...
...
@@ -27,7 +31,7 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
} else {
//TODO: 자리 꽉찼다는 MODAL
}
}
}
, []);
return (
<button className={`flex items-center place-content-between m-2 w-5/6
...
...
web/src/pages/Login.tsx
View file @
3fd2bc5
import React, { useContext, useState } from 'react';
import React, { useC
allback, useC
ontext, useState } from 'react';
import { useHistory } from 'react-router';
import { Main } from '../components/common/Main';
import { MessageResponse, MessageType } from '../components/common/types';
import { MessageResponse, MessageType
, RawMessage
} from '../components/common/types';
import SocketContext from '../contexts/SocketContext';
export const Login: React.FC = () => {
...
...
@@ -9,15 +9,19 @@ export const Login: React.FC = () => {
const socket = useContext(SocketContext);
const [ username, setUsername ] = useState("");
const login = () => {
socket.emit(MessageType.LOGIN, username, (response : MessageResponse<null>) => {
const login = useCallback(() => {
const rawMessage: RawMessage = {
type: MessageType.LOGIN,
message: { username }
}
socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {
if (response.ok) {
history.push('/rooms');
} else {
console.error('login error!'); // TODO: 팝업 에러?
}
});
}
}
, []);
return (
<Main>
...
...
web/src/pages/Rooms.tsx
View file @
3fd2bc5
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { Main } from '../components/common/Main';
import { MessageResponse, MessageType } from '../components/common/types';
import { MessageResponse, MessageType
, RawMessage
} from '../components/common/types';
import { RoomBlock } from '../components/rooms/RoomBlock';
import { Room } from '../components/rooms/types';
import SocketContext from '../contexts/SocketContext';
...
...
@@ -10,12 +10,17 @@ export const Rooms: React.FC = () => {
const [ rooms, setRooms ] = useState<Room[]>([]);
const refreshRooms = useCallback(() => {
socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => {
const rawMessage: RawMessage = {
type: MessageType.ROOM_LIST_REQUEST,
message: {}
}
socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => {
if (response.ok) {
setRooms(response.result!);
} else {
// TODO: 에러 핸들링
console.log("방 목록을 수신하지 못함");
console.log(response);
}
});
}, []);
...
...
Please
register
or
login
to post a comment