Hướng dẫn tạo ứng dụng chat trong React kết hợp với Firebase - Phần 1

Như các bạn đã biết, hiện nay trên các mạng xã hội hay bất cứ đâu thì ứng dụng chat là điều không thể thiếu, bất cứ ngôn ngữ nào cũng đều có thể viết ra được một ứng dụng chat đơn giản, nhưng hôm nay mình xin hướng dẫn viết bằng React. Do mới học React đang còn non kém nên có gì sai sót mong mọi người đóng góp ý kiến.

Việc khởi tạo ứng dụng của React khá là đơn giản, bạn chỉ cần làm một số bước sau đây

npm install -g create-my-app
create-my-app react-chat

lưu ý: Nếu bạn dùng Linux báo lỗi permission denied thì có thể thêm sudo trước npm install -g create-my-app nhé. bước tiếp theo:

cd reate-chat
npm install
npm start

Ok! khi truy cập vào localhost:3000 bạn có thể nhìn thấy giao diện đơn giản của React. Bây giờ chúng ta bắt đầu nhé.

Để quản lý các Components dễ dàng hơn thì ở đây mình sẽ tạo các folder chứa các components đó. Đường dẫn chứa các folder đó sẽ có dạng như sau: "src/node_modules/name components". Bạn tạo theo kiểu hình bên dưới nhé, có thể đặt tên giống vậy luôn cũng được. Đây là các component con sẽ được import vào các component cha, ở phần sau các bạn sẽ hiểu rõ hơn.

Bây giờ mình sẽ bắt đầu với component đầu tiên đó là Message.

import React from 'react';
import './style.css';

export default function Message({ user, text }) {
  return (
    <li className="message">
      <span className="message-user">{user}</span>
      <span className="message-text">{text}</span>
    </li>
  );
}

Với component trên nó giúp bạn hiển thị tên user cũng như đoạn text mà người dùng đã nhập. Ở đây việc sử dụng export như bạn đã biết thì tất cả các biến và function trong 1 file JS sẽ chỉ được truy xuất trong file (hay còn gọi là file private). Để cho phép các thành phần có thể sử dụng từ các file khác, chúng ta cần dùng tới từ khoá export hoặc import.

Tiếp theo mình sẽ tạo 1 component tên là MessageInput, component này sẽ là nơi xử lý sự kiện người dùng nhập vào.

import React, { Component } from 'react';
import './style.css';

export default class MessageInput extends Component {

  state = {
    value: ',
  };

  onChange = event => this.setState({ value: event.target.value });

  render() {
    return (
      <input
        type="text"
        placeholder="Type your message"
        className="message-input"
        onChange={this.onChange}
        value={this.state.value}
      />
    );
  }
}

Đoạn code trên sẽ khởi tạo một state là value và một sự kiện onChange. Khi bạn nhập text vào nó sẽ lưu giá trị text vào value của state đó. Tiếp theo, mình sẽ tạo một component User, component sẽ cho phép nhập tên người dùng để chat.

import React, { PureComponent  } from 'react';

export default class User extends PureComponent {

  onChange = (event) => {
    this.props.onUpdate(event.target.value);
  }

  render() {
    return (
      <input
        type="text"
        placeholder="Username"
        value={this.props.user}
        className="message-username"
        onChange={this.onChange}
      />
    );
  }
}

Giờ chúng ta sẽ tạo 1 folder lưu các Component cha, ở đây mình đặt tên là container và các file có dạng như sau:

Đối với component Chat mình sẽ thực hiện đoạn code sau:

import React, { PureComponent } from 'react';
import MessageList from 'containers/MessageList';
import MessageInput from 'components/MessageInput';
import User from 'components/User';
import './style.css';

export default class Chat extends PureComponent {
  state = {
    user: `User${~~(Math.random()*10000)}`,
  }


  render() {
    return (
      <main>
        <MessageList />
        <div className="chat-input-area">
          <User />
          <MessageInput  />
        </div>
      </main>
    );
  }
}

Ở đây mình sẽ import các component MessageInput, User, MessageList vào sau đó tạo một state lưu tên của các user, mình đã random tên của user theo định dang "User123" sau đó mình sẽ render các component đã import vào và hiển thị ra thôi.

Tiếp theo đến component MessageList, đây là nơi lữu trữ các dòng chat mà người dùng nhập vào, cũng giống như user, mình sẽ tạo random thêm một số đoạn text ứng với mỗi user đã random từ trước.

import React, { Component } from 'react';
import Message from 'components/Message';
import './style.css';

export default class MessageList extends Component {
  state = {
    messages: {},
  };

  componentDidMount() {
    this.subscribeToFirebase();
  }

  subscribeToFirebase() {
    const msgRef = window.firebase.database().ref('messages');

    msgRef.on('value', snapshot =>
      snapshot.forEach(childSnapshot => {
        const msg = childSnapshot.val();

        this.setState(state => ({
          messages: {
            ...state.messages,
            [msg.id]: msg,
          }
        }));
      })
    );
  }

  render() {
    const { messages } = this.state;
    const ids = Object.keys(messages);

    return (
      <ul className="message-list">
        {
          ids.map(id => <Message key={id} { ...messages[id] } />)
        }
      </ul>
    );
  }
}

Ở component này mình sẽ tạo một state lưu giá trị của tất cả dòng chát mà người dùng nhập vào. Ở đây mình có sử dụng firebase dùng để lưu trữ cũng như lấy dữ liệu đễ hiển thị ra, nếu bạn nào chưa hiểu về firebase có thể tìm hiểu http://eitguide.net/firebase-bai-mo-dau-gioi-thieu-ve-firebase/. Để nhận các message từ firebase ta sẽ lắng nghe sự kiện ‘value’ thông qua hàm on của đối tượng Firebase. Sau đó sẽ dúng giá trị message của state để lưu các giá trị lấy từ firebase lên.

Tiếp theo để dùng được firebase bạn sẽ phải thêm thư viện của nó vào thư mục index.html, thư mục này nằm ở đường dẫnpublic/index.html.

    <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
    <script>
      // Initialize Firebase
      firebase.initializeApp({
        apiKey: "AIzaSyCAlKs67UMzYLaOXxgvuLwaEdO2N2G4kRw",
        authDomain: "chat-d4243.firebaseapp.com",
        databaseURL: "https://chat-d4243.firebaseio.com",
        storageBucket: "chat-d4243.appspot.com",
        messagingSenderId: "977086463770"
      });
    </script>

Ok! thế là xong việc hiển thị người dùng, hiển thị message random lấy từ firebase ra. Ở phần sau mình sẽ xử lý các sự kiện người dùng nhập message vào rồi hiển thị ra nhé.