React Native HMS Nearby Service Plugin | Chat Application
Introduction
React Native HMS Nearby Service Plugin enables communication between Huawei Nearby Service SDK and React Native platform. It allows apps to easily discover nearby devices and set up communication with them using technologies such as Bluetooth and Wi-Fi.
Understanding Nearby Connection
Nearby Connection provides connection between devices and allows users to transfer data between devices.
A simple connection and data transfer process:
- Discoverer : Starts scanning using startScan().
- Broadcaster : Starts broadcasting using startBroadcasting().
- Discoverer : Finds broadcasting devices using SCAN_ON_FOUND event. After devices found, sends request for connection using requestConnect().
- Discoverer and Broadcaster : requestConnect() triggers the CONNECT_ON_ESTABLISH on both sides.
- Discoverer and Broadcaster : Each side can decide accepting or rejecting connection using acceptConnect() or rejectConnect().
- Discoverer and Broadcaster : rejectConnect() or acceptConnect() triggers the CONNECT_ON_RESULT event.
- Discoverer and Broadcaster : After a connection successfully established, each side can stop broadcasting using stopBroadCasting() and scanning using stopScan() because continuous scanning or broadcasting consumes to energy and decreases the bandwidth for transmitting data.
- Discoverer and Broadcaster : After a successful connection each side can transfer data using transferFile(), transferBytes() or transferStream() functions. Transferring process or received data information can be obtained by DATA_ON_RECEIVED and DATA_ON_TRANSFER_UPDATE events.
Nearby Connection provides different connection topologies according to different use cases.
- MESH : M-to-N or cluster-shaped connection topology.
- STAR : 1-to-N or star-shaped connection topology.
- P2P : 1-to-1 connection topology.
Application Creation
Create NearbyChat application using command below.
Download React Native HMS Nearby Service Plugin.
Development Process
- App.js : Entry point of the chat application. We will handle switching between InitialScreen and ChatScreen. Also we will get the required permissions using this component.
- src/InitialScreen.js : We will handle connection (scanning, broadcasting, requesting, rejecting) process using this component.
- src/ChatScreen.js : We will handle data transfer operations (message sending and receiving) using this component.
- src/Styles.js : Contains all view styles for this application.
App Screen Creation
Lets create our app’s entry point App.js. In this class we requested permissions from user and according to isInitialized state switched between screens. chatEndpointId is a state which we will set in InitialScreen and pass it to ChatScreen.
Initial Screen Creation
Lets create src/InitialScreen.js and add our class named InitialScreen. In this component we will handle connection between devices according to given connection process diagram in Understanding Nearby Connection.
The phone is scanner if it starts scanning or broadcaster if it starts broadcasting. Each role contains its own path to establish connection. Application uses P2P (1-to-1) as a connection topology. When component attached, it registers for events and manages each role according to possible success and failure cases. If a connection result is successful then app switches to ChatScreen using isInitialized state and sets endpointId state.
Chat Screen Creation
Lets create src/ChatScreen.js and add our class named ChatScreen. In this component we will handle data transfer operations between connected devices and disconnection process.
User writes a message and sends it using send button. transferBytes() function transfers the data to given endpointId. Transferred message obtained from DATA_ON_RECEIVED event. If a user disconnects from chat, triggers CONNECT_ON_DISCONNECTED and app switches to InitialScreen for each user.
Style Creation
For having an attractive user interface lets change our Styles.js as given below.
Here is the Magic !!! Lets Run the App
