ReactJS ile Temel Bir Kullanıcı Arayüzü Oluşturma

import React from 'react'
const ChatLine = ({ name, message }) => {
return (
<li>
{name}: {message}
</li>
)
}
export default

Not: ReactJS otomatik olarak html enjeksiyonunu engeller, bu yüzden endişelenmenize gerek yok.

Adım 3: Bileşen

ChatHolder.js'de yalnızca bir taban alan yeni bir bileşen oluşturuyoruz:

Satırlar: Dizi<{ name: string, message: string }>

Eğer çizgiler Boş bırakıldığında basit bir bildirim gösteririz.

if (lines.length === 0) {
return <div>Chat history is empty</div>
}

Lines, nesnelerden oluşan bir dizidir. Her nesnenin bir adı ve bir özellik mesajı vardır. Dizideki tüm öğeleri eşleyerek, adı ve dizeyi bileşene ileterek sonuca ulaşırız. Birden fazla ChatLine düğümü oluşturun.

const chatLines = lines.map(
(line, index) => (
<ChatLine key={index} name={line.name} message={line.message} />
)
)

Sonra sonuç şu şekilde olur

İşlediğimiz bileşenin son hali ortaya çıkıyor:

import React from 'react'
import ChatLine from './ChatLine'
const ChatLineHolder = ({ lines }) => {
if (lines.length === 0) {
return <div>Chat history is empty</div>
}
const chatLines = lines.map(
(line, index) => (
<ChatLine key={index} message={line.message} name={line.name} />
)
)
return (
<ul>
{chatLines}
</ul>
)
}
export default ChatLineHolder

Not: Genellikle anahtar olarak benzersiz bir tanımlayıcı kullanırsınız. Bu durumda, indeksi güvenle kullanabiliriz, çünkü indeks ve nesne arasındaki ilişki değişmez. Gerçek dünya uygulamalarında bu oldukça can sıkıcıdır.

Adım 4: Bileşen

Fark etmiş olabileceğiniz gibi, mesajları içe aktarmanın hala bir yolu yok. Metin girişini yönetir ve düğmeye tıklandığında yeni bir sohbet mesajı başlatmak için gönderme sırasında bir geri arama işlevi kullanır. Bir özellik gerektirir:

• onSend: (mesaj: dize) => void

Kullanıcı girdi bileşeni durumunu korur ve güncellemeleri yönetir.

const [value, setValue] = useState('')
const onChange = (event) => {
setValue(event.target.value)
}

Gönder düğmesine tıklandığında, onSend fonksiyonu mevcut durumla çağrılır. Kullanıcının giriş alanını manuel olarak temizlemesini istemediğimiz için, onSend fonksiyonunu çağırdıktan sonra durumu sıfırlıyoruz.

const onClickSend = () => {
onSend(value)
setValue('')
}

İşte son bileşen:

import React, { useState } from 'react'
const ChatInput = ({ onSend }) => {
const [value, setValue] = useState('')
const onChange = (event) => {
setValue(event.target.value)
}
const onClickSend = () => {
setValue('')
onSend(value)
}
return (
<div>
<input type='text' value={value} onChange={onChange} />
<button onClick={onClickSend}>send</button>
</div>
)
}
export default ChatInput

Adım 5: Bileşen

Mod

Bileşenlerimiz herhangi bir veri depolamadığından, Durumu yönetmek için kullandığımız ana bileşendir. 3 tür durumumuz vardır:

• isim: Sohbet eden kullanıcının adı.
• chatLines: Sohbet geçmişini temsil eden bir dizi.
• eventLister: Sunucudan gelen olayları yönetmek için kullanılır. (Not: Dinleyiciyi bölüme koymaya karar verdim.

(Basitleştirmek adına, gerçek dünyadaki bir uygulamada farklı bir yaklaşım benimsemek isteyebilirsiniz.)

Durumumuzu başlatmak için durum kancalarını kullanırız:

 const [chatLines, setChatLines] = useState([])
const [eventListener, setEventListener] = useState(null)
const [name] = useState(generateRandomName())

Bileşen oluşturma testi

Şimdilik sadece adımızı ve bileşeni görüntülüyoruz chatLines'ı sabit öğelerle sunuyoruz. chatLines boş bir dizi olduğundan, bildirimimiz sağlanmalıdır. Boş bir flash işlevi çağırıyoruz. Göndereceğiz. Bir sonraki adımda infazı yapılacak.

return (
<div className='chat-app'>
<h2>Chatting as {name}</h2>
<ChatLineHolder lines={chatLines} />
<ChatInput onSend={() => {}} />
</div>
)

Uygulamanızın bazı verilerle çalışıp çalışmadığını kontrol etmek istiyorsanız, chatLines'a birkaç öğe eklemeniz yeterli olacaktır.

const [chatLines, setChatLines] = useState([{ name: 'Thomas', 'message': 'Hi' }])

Etkileşim ekle

Sohbet giriş alanımıza zaten metin girebiliyoruz, ancak gönder tuşuna basmak hiçbir işe yaramıyor. Bunun nedeni, Hiçbir işe yaramayan bir şey gönderdik. Dolayısıyla bunun için bir uygulamaya ihtiyacımız var.

Henüz sunucumuza bağlı olmadığımız için, onSend'imizi durumu doğrudan güncelleyecek şekilde uygulayacağız. Bunun için addChatLine: (chatLine) => void adlı bir yardımcı fonksiyon ekleyeceğiz. Bunu daha sonra sunucu tarafından gönderilen mesaj olaylarını işlemek için kullanacağız.

const addChatLine = (chatLine) => {
setChatLines(chatLines => {
return [...chatLines, chatLine]
})
// If you don't have a lot of experience with ReactJS, just think of this as:
// setChatLines([...chatLines, chatLine])
}

onSend bir sohbet satırı nesnesi oluşturur ve addChatLine'ı çağırır

const onSend = (message) => {
const chatLine = { name, message }
addChatLine(chatLine)
}

Göndermeyi unutmayın Göndermek.

return (
<div className='chat-app'>
<h2>Chatting as {name}</h2>
<ChatLineHolder lines={chatLines} />
<ChatInput onSend={onSend} />
</div>
)

Artık giriş alanına metninizi girebilir, gönder'e tıklayabilir ve mesajınızı anında görebilirsiniz.

Adım 6: Sunucuya bağlanın

Kendinizle sohbet etmek çok sıkıcı. Bu yüzden uygulamamızı sunucuya bağlamamız gerekiyor. Bu işlem 2 aşamada gerçekleşir:

• Sunucuya mesaj gönder
• Sunucu tarafından gönderilen olaylara abone olun

Sunucuya mesaj gönder

Yazdığımız onSend fonksiyonunu değiştirmemiz gerekiyor. Tüm gövdeyi, adımızı ve mesajımızı gövdede gönderen basit bir fetch çağrısıyla değiştirebiliriz. addChatLine fonksiyonunu çağırmamak önemlidir çünkü bunu daha sonra sunucu tarafından gönderilen olayı aldığımızda yapacağız.

const onSend = async (message) => {
fetch('http://localhost:4000/say',
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
method: 'post',
mode: 'no-cors',
body: `name=${name}&message=${message}`
})
}

Şimdi gönder butonuna tıklarsanız, sunucuya bir istek gönderilecek, ancak durumunuz henüz güncellenmeyecek! Bu konuyu bir sonraki adımda ele alacağız.

Sunucu tarafından gönderilen olaylara abone olun

Olayları dinlemeye başlamadan önce, bu tür mesaj olaylarını işleyen bir fonksiyona ihtiyacımız var. Daha sonra mesaj türü olaylara bağlanacağımız için, bunu uygun şekilde uygulayabiliriz. Tek yaptığı, event.data'yı alıp bir nesneye ayrıştırmak ve addChatLine'ı çağırmaktır.

const onMessage = (event) => {
const chatLine = JSON.parse(event.data)
addChatLine(chatLine)
}

Sunucu tarafından gönderilen olayları almak için, yerel adresimizle EventSource sınıfının bir nesnesini oluşturuyoruz. Ardından, mesaj türü için bir olay dinleyicisi ekliyoruz. Ardından bunu bir useEffect kancasına sarıyoruz (bu, bileşenin Bağlanır, olay kaynağı başlatılır ve bağlandıktan sonra kapatılır).

useEffect(() => {
let source = new EventSource('http://localhost:4000/listen')
source.addEventListener('message', onMessage)
setEventSource(source)
return () => { source.close() }
}, [])

Bileşen Son olarak şöyle görünüyor:

import React, { useEffect, useState } from 'react'
import ChatLineHolder from './ChatLineHolder'
import ChatInput from './ChatInput'
const App = () => {
const [chatLines, setChatLines] = useState([])
const [eventSource, setEventSource] = useState(null)
const [name] = useState(generateRandomName())
const addChatLine = (chatLine) => {
setChatLines(chatLines => [...chatLines, chatLine])
}
const onMessage = (event) => {
const chatLine = JSON.parse(event.data)
addChatLine(chatLine)
}
useEffect(() => {
let source = new EventSource("http://localhost:4000/listen")
source.addEventListener('message', onMessage)
setEventSource(source)
return () => { source.close() }
}, [])
const onSend = (message) => {
fetch(
`http://localhost:4000/say`,
{
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "post",
mode: 'no-cors',
body: `name=${name}&message=${message}`,
})
}
return (
<div className='chat-app'>
<h2>Chatting as {name}</h2>
<ChatLineHolder lines={chatLines} />
<ChatInput onSend={onSend} />
</div>
)
}
export default App

Sonuç

Artık sayfanızı iki sekmede açıp iki farklı kişiyle sohbet edebilirsiniz! Ayrıca, her örneğin kendi durumu olduğundan, App bileşenini iki kez bağlayabilirsiniz (index.js'yi değiştirerek).