[React Native] 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with websocket)

안녕하세요 Foma 입니다.

 

지난 글에 Node.js로 웹소켓 서버를 구현했는데요.

 

오늘은 React Native에서 해당 서버를 이용하여 실시간으로 채팅을 주고받는 기능을 구현해 보도록 하겠습니다.

 

바로 시작할게요~

 

(환경은 React Native CLI + Typescript 입니다.)

---

Tutorial

 

• 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket)
• 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with websocket)

---

Install

 

react-native-device-info

 

React Native에서 디바이스 아이디를 알아내기 위한 모듈

 

npm install react-native-device-info@8.4.5

---

Preview

 

---

Model

 

Message.ts

 

interface Message {
  user: string;
  message: string;
}

---

Set state

 

1. serverState 

 

서버의 상태를 저장

 

2. messageText

 

인풋창에 입력되는 메세지의 상태를 저장

 

3. serverMessages

 

서버에서 받아온 메시지들의 상태를 저장

 

const ChatScreen = () => {
  const [serverState, setServerState] = useState('Loading...');
  const [messageText, setMessageText] = useState('');
  const [serverMessages, setServerMessages] = useState([]);
  ...

---

Set variables

 

위에서 설치한 react-native-device-info에서 getUniqueId를 import 합니다.

 

import {getUniqueId} from 'react-native-device-info';

 

디바이스 아이디를 userId로 저장해 줍니다.

 

  let userId = getUniqueId();

 

서버에 메세지들을 받아올 리스트를 만들어 줍니다.

 

const serverMessagesList: Message[] = [];

---

Set websocket methods

 

webSocket을 useRef로 저장해 줍니다.

 

  const webSocket = useRef(null);

 

useEffect를 사용하여 웹소켓 인스턴스를 로컬 호스트 아이피와 함께 생성해 줍니다.

 

  useEffect(() => {
    webSocket.current = new WebSocket(`ws://로컬호스트아이피`);
    ...

 

서버가 연결되었을 때 서버의 상태를 변경해 줍니다.

 

    webSocket.current.onopen = () => {
      setServerState('Connected to the server');
    };

 

서버에서 어떤 메세지가 왔을 경우 데이터를 파싱하고 severMessageList에 넣은 뒤 서버 메세지의 상태에 추가해 변경해 줍니다.

 

    webSocket.current.onmessage = e => {
      let parse = JSON.parse(e.data);
      serverMessagesList.push(parse);
      setServerMessages([...serverMessagesList]);
    };

 

서버에서 어떤 에러가 발생했을 때 서버의 상태를 변경해 줍니다.

 

    webSocket.current.onerror = e => {
      setServerState(e.message);
    };

 

서버가 닫혔을 때도 서버의 상태를 변경해 줍니다.

 

    webSocket.current.onclose = e => {
      setServerState('Disconnected. Check internet or server.');
    };

 

마지막으로 useEffect에 서버를 닫는 것을 리턴해 줍니다.

 

  return () => {
      webSocket.current.close();
    };
  }, []);

---

Send a message

 

아래와 같이 JSON으로 된 객체를 문자화 시켜서 서버에 보내줍니다.

 

  const sendMessage = () => {
    let str = JSON.stringify({user: userId, message: messageText});
    webSocket.current.send(str);
    setMessageText('');
  };

---

View

 

아래와 같이 뷰를 레이아웃 해줍니다.

 

  return (
    <View>
      <Text>{serverState}</Text>
      <View
        style={{
          padding: 5,
          flexGrow: 1,
        }}>
        <FlatList
          style={styles.list}
          contentContainerStyle={{paddingBottom: 50}}
          data={serverMessages}
          keyExtractor={item => item.id}
          renderItem={({item}) =>
            item.user == userId ? (
              <Text style={styles.myChat}>{item.message}</Text>
            ) : (
              <Text style={styles.otherChat}>{item.message}</Text>
            )
          }
        />
      </View>
      <View style={styles.bottomContainer}>
        <TextInput
          style={styles.input}
          placeholder={'Add Message'}
          onChangeText={text => {
            setMessageText(text);
          }}
          value={messageText}></TextInput>
        <Pressable onPress={sendMessage} disabled={messageText == ''}>
          <Text style={styles.send}>Send</Text>
        </Pressable>
      </View>
    </View>
  );
};

---

Source Code

 

GitHub - fomagran/ChattingAppFullStack