React Native와 Socket을 사용하여 채팅 애플리케이션을 구축합니다.io

본고에서 우리는 React Native와 Socket 구축React Native Chat App을 어떻게 사용하는지 배울 것이다.io.콘센트io는 실시간 웹 응용 프로그램에 주로 사용되는 광범위한 JavaScript 라이브러리입니다.클라이언트 (브라우저) 와 서버 간의 실시간, 양방향 및 이벤트 기반 통신을 지원합니다.그것은 노드에서 구축된 것이다.js 및 JavaScript 클라이언트 라이브러리그 가장 두드러진 특징은 신뢰성, 자동 재연결, 다중 그룹 룸 지원과 검측 연결 중단이다.
따라서 이것은 우리가 플러그인에서 얻은 특성이다.채팅 프로그램을 만들기 위해 React 원본 프로그램에 통합할 것입니다.
그러니까 시작합시다, 점원들!!!

Nodejs 백엔드

우선, 클라이언트로부터 들어오는 모든 메시지와 요청을 처리하기 위해 백엔드 서버가 필요합니다.
여기에서 우리는 express와 socket을 포함해야 한다.색인에 io우리 노드 프로젝트의 js 파일입니다.우리는 es5 방법으로 필요한 express와 socket을 가져올 것입니다.io 라이브러리.그러나 es6 인코딩 형식으로 가져올 수도 있습니다.우리는 express 방법을 상량 변수 앱으로 초기화하고 앱 변수로 http 서버를 만들 것입니다.이후에 우리는 플러그인 탐지 서버를 사용할 것이다.io 라이브러리.수신할 포트 서버는 3000으로 설정됩니다.

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io").listen(server);
const port = 3000;

그 다음으로 우리는 플러그인을 시작해야 한다.io 서버에는 on 방법이 있습니다.다음 코드 세그먼트와 같이 양방향 통신을 위해 함수를 보내야 합니다.

io.on("connection", socket => {
  console.log("a user connected :D");
  socket.on("chat message", msg => {
    console.log(msg);
    io.emit("chat message", msg);
  });
});

마지막으로, 우리는 서버가 이 포트의 모든 전송 요청을 정탐할 수 있도록 포트 3000에 서버를 시작할 것이다.

server.listen(port, () => console.log("server running on port:" + port));

서버 측 코드와 프레젠테이션 결과를 Codesandbox 에서 볼 수 있습니다.이것은 우리의 서버 설정을 완성했다.

반응 본체 부분

이 단계에서 React Native 프로젝트가 설정되어 있고 실행 중이라고 가정합니다.현재, 우리는 계속 응용 프로그램을 구축하고, 서버 측을 클라이언트 채팅 응용 프로그램에 통합한다.
여기, 우선, 우리는 플러그인을 가져와야 한다.io 클라이언트 패키지, 즉 플러그인에서 io 모듈을 가져옵니다.다음 코드 세그먼트와 같이 io 클라이언트 패키지:

import io from "socket.io-client";

다음은 서면 메시지와 메시지를 저장하는 그룹의 변경 사항을 처리하기 위한 두 가지 상태를 만들어야 합니다.이 두 가지 상태는 클라이언트가 입력한chatMessage와 제출하거나 받은 메시지를 저장하는 chatMessages 수조를 처리합니다.다음 코드 세그먼트에는 다음과 같은 코드가 나와 있습니다.

constructor(props) {
   super(props);
   this.state = {
      chatMessage: "",
      chatMessages: []
   };
}

이제 서버와의 연결을 초기화합니다.
여기서 io 모듈의 on 방법을 사용하면 다음 코드 세그먼트와 같이 전송되거나 수신된 새로운 메시지를 연결하여 진열 상태를 변경할 수 있습니다.

componentDidMount() {
   this.socket = io("http://127.0.0.1:3000");
    this.socket.on("chat message", msg => {
          this.setState({ chatMessages: [...this.state.chatMessages, msg]   
     });
  });
}

다음은 간단한 폼을 만들고 매핑 기능을 사용하여 메시지를 표시해야 합니다.우리는 간단한 Text Input 요소를 사용하여 클라이언트가 onSubmitEditing 이벤트가 발생할 때 메시지를 입력하고 submitChatMessage 함수를 터치하도록 할 것입니다. 아래의 코드 세그먼트와 같습니다.

render() {
    const chatMessages = this.state.chatMessages.map(chatMessage => (
      <Text style={{borderWidth: 2, top: 500}}>{chatMessage}</Text>
    ));

    return (
      <View style={styles.container}>
        {chatMessages}
        <TextInput
          style={{height: 40, borderWidth: 2, top: 600}}
          autoCorrect={false}
          value={this.state.chatMessage}
          onSubmitEditing={() => this.submitChatMessage()}
          onChangeText={chatMessage => {
            this.setState({chatMessage});
          }}
        />
      </View>
  ` );
  }

submitChatMessage 함수를 만드는 것은 emit 방법을 사용하여 메시지를 서버에 보내기 위해서입니다. 아래 코드 세그먼트와 같습니다.

submitChatMessage() {
    this.socket.emit('chat message', this.state.chatMessage);
    this.setState({chatMessage: ''});
  }

마지막으로 다음 코드 세그먼트와 같이 스타일시트 구성 요소를 사용하여 채팅 용기에 스타일을 추가합니다.

const styles = StyleSheet.create({
  container: {
    height: 400,
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

현재, 우리는 설비 시뮬레이터나 테스트에서 우리의 프로젝트를 실행합니다.우리가 보는 바와 같이, 그것의 작업 원리는 예상과 일치한다.

따라서 이것은 우리가 React Native와 Socket을 사용하여 간단한 채팅 응용 프로그램을 성공적으로 완성했다는 것을 상징한다.가방

결론

이 문장에서 우리는 간단한 플러그인을 만들고 설정하는 방법을 배웠다.io 서버는 Node와 express를 사용합니다.그리고 클라이언트 React 본체 채팅 응용 프로그램과 서버 측을 통합하는 방법을 배웠습니다.우리는 성공적으로 쌍방향 소통을 세웠다.마지막으로, 우리는 장치 시뮬레이터에서 채팅 프로그램을 성공적으로 실행하고 테스트할 수 있다.
2019년 8월 19일, 원재https://kriss.io.

드러내다

이 글은 부속 링크를 포함한다.만약 당신이 본고에서 제공한 다른 링크에서 제품이나 서비스를 구매한다면, 나는 보상을 받을 수 있습니다.