React Native 实现chat 即时聊天（第1天）

及时聊天功能渐渐的几乎成为每个APP的标配功能了，最近想给自己的APP增加即时聊天功能。本想调用一些云服务的聊天接口，看了下价格，接受不了。那就自己尝试写一个吧！我的应用场景比较简单，最多同时在线也就1000人左右。

实现思路 

前端react实现，数据发生变化界面自动变，做起来会比较简单。第一版，定时刷新http的方式取数据即可，这种方式缺点比较多，但是目前用户量比较小的情况下，影响不大，后期换成websocket 实现。

第一版效果

代码分享

为了方便查看，服务器端请求的代码被我暂时注释，需要的自行打开注释。

/* eslint-disable prettier/prettier */ import React, {useState, useEffect} from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, TextInput, Button, } from 'react-native'; function MessageList(props) { const items = props.items; const receiver = props.receiver; const listItems = items.map((item, index) => { return ( <View key={index} style={[styles.chatMessage, receiver == item.name ? styles.chatReceiver : null]}> <Text style={styles.chatNameReceiver}>{item.name}</Text> <Text style={styles.messageText}>{item.message}</Text> </View> ); }, ); return ( <>{listItems}</> ); } const URL_SERVER = 'http://192.168.199.133:8080'; const App = () => { const [items, setItems] = useState([ {name: 'boy', message: '今天晚上吃点啥？'}, {name: 'girl', message: '我们去吃牛排吧！'}, {name: 'boy', message: '好的，我去给小红打气。'}, {name: 'boy', message: '你们在门口等我吧。'}, {name: 'girl', message: '你人呢？我到门口啦'}, ]); const [receiver, setReceiver] = useState('girl'); const [value, onChangeText] = React.useState(''); let timer; //计时器 useEffect(() => { //loadMessage(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /** * 加载聊天信息 */ const loadMessage = () => { timer = setInterval(function () { //执行代码 console.log('-----------获取数据------------'); fetch(URL_SERVER + '/list') .then(function (response) { return response.json(); }) .then(function (result) { if (result.code == 0) { setItems(result.data); } }); }, 1000); }; const postMessage = () => { fetch(URL_SERVER+'/send', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: 'roomId=1&message=' + value + '&name=' + receiver, }) .then(response => { if (response.ok) { return response.text(); } throw new Error('Network response was not ok.'); }) .then(responseText => { console.log(responseText); }) .catch(e => { console.log(e.toString()); }); }; //发送消息 const sendMessage = (message) => { let newItems = JSON.parse(JSON.stringify(items)); newItems.push({name: receiver, message: message}); setItems(newItems); }; const sendDo = () => { sendMessage(value); //postMessage(); onChangeText(''); }; return ( <> <StatusBar barStyle="dark-content"/> <SafeAreaView style={styles.mainContent}> <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={text => setReceiver(text)} placeholder={'聊天人姓名'} value={receiver} onSubmitEditing={sendDo} /> <ScrollView style={styles.chatBody}> <View style={{height: 15}}></View> <MessageList items={items} receiver={receiver}/> </ScrollView> <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={text => onChangeText(text)} placeholder={'开始聊天吧'} value={value} onSubmitEditing={sendDo} /> <Button onPress={sendDo} title="发送" color="#841584" /> </SafeAreaView> </> ); }; const styles = StyleSheet.create({ mainContent: { flex: 1, backgroundColor: '#ededed', }, chatBody: { flex: 1, padding: 10, }, chatMessage: { position: 'relative', backgroundColor: '#ffffff', padding: 10, borderRadius: 10, alignSelf: 'flex-start', marginBottom: 25, }, chatReceiver: { marginLeft: 'auto', backgroundColor: '#95ec69', }, messageText: { fontSize: 16, }, chatName: { fontSize: 12, position: 'absolute', top: -15, fontWeight: 'bold', }, chatNameReceiver: { fontSize: 12, position: 'absolute', top: -18, fontWeight: 'bold', marginLeft: 'auto', }, chatTimeStamp: { marginLeft: 10, fontSize: 12, }, }); export default App;

程序目前比较简陋，思路仅供参考。