ساخت برنامه چت زمان حقیقی React و GraphQL

GraphQL و React به خوبی همکاری می کنند تا ابزارهایی را برای کارهای برنامه نویسی معمول وب از جمله ادغام در زمان حقیقی برای توسعه دهندگان فراهم کنند. در این مقاله ، از React و GraphQL برای ایجاد یک برنامه چت در زمان حقیقی استفاده خواهید کرد.
کارهای زیر را انجام خواهید داد:
پروژه React و GraphQL را تنظیم میکنید
از Apollo برای تعامل با سرور مجازی GraphQL از React استفاده میکنید
جستجو کرده و موارد را تغییر میدهید
پیغام و اشتراک در زمان حقیقی را پیاده سازی می کنید
GraphQL یک نمونه جستار است که حول الگوریتم Graph ساخته شده توسط فیسبوک ایجاد شده است. GraphQL به جای ارسال بارهای JSON از طریق REST به سرور مجازی که بعدا سرور مجازی بانک اطلاعاتی را جستجو کند، این سؤالات را مستقیم از کلاینت ارائه می دهد. به این ترتیب کار شما فقط با آنچه کلاینت نیاز دارد پایان می یابد و نه آنچه که نقطه انتهایی REST در معرض آن قرار دارد. برای ارتباط برقرار کردن با سرور مجازی GraphQL از React خود ، از Apollo – کلاینت GraphQL -استفاده خواهید کرد. روند تنظیم سرور مجازی و ابزارهای درگیر نیز می تواند بسیار زیاد شود. بعضی اوقات حتی ممکن است اشتباه کنید ، و از این رو محصولات خود را در معرض آسیب پذیری های امنیتی قرار دهید. Graphcool یک سرور مجازی GraphQL میزبان بسیار گسترده است که می توانید با آن کار کنید. با استفاده از توابع بدون سرور مجازی می توانید هر چیزی را روی سرور مجازی دستکاری کنید.
راه اندازی یک پروژه React
create-react-app ابزار مورد علاقه برنامه نویسان برای چهارچوب بندی برنامه های React بوده است. با اجرای دستور زیر ، پروژه جدیدی را در React قرار دهید:
$ create-react-app graphql-chat

با این کار یک پوشه جدید به نام Graphql-chat ایجاد شده و تمامی فایلهای React لازم برای کار با آنها را دانلود می کند.
متعلقات را در pack.json به شرح زیر به روز کنید:
package.json
“dependencies”: {

“apollo-client-preset”: “^1.0.6”,
“apollo-link-ws”: “^1.0.4”,
“graphql”: “^0.12.3”,
“graphql-tag”: “^2.6.1”,
“react”: “^16.2.0”,
“react-apollo”: “^2.0.4”,
“react-dom”: “^16.2.0”,
“react-scripts”: “1.0.17”,
“subscriptions-transport-ws”: “^0.9.4″
},

سپس دستور نصب را اجرا کنید تا همه این فایل ها دانلود شوند:
$ npm install

$ # OR

$ yarn

در ادامه یاد میگیریم که هریک از این متعلقات هنگامی که با آنها مواجهه میشویم، چه کاری انجام میدهند.
برخی از فایل های جهانی CSS باید در بر گرفته شده باشند تا نگرانی های طراحی برای این پروژه از طرف ما برطرف شود. برچسب head را در public/index.html به روز کنید تا فایل های CSS زیر را شامل شود:
public/index.html
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css” />
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css” />

تنظیم یک نمونه GraphQL
به جای اینکه یک سرور مجازی محلی در حال اجرا باشد ، می توانیم از یک سرویس میزبانی شده رایگان موجود برای تنظیم یک نمونه GraphQL استفاده کنیم. این نه تنها رایگان است بلکه کار کمتری دارد و کار با آن آسانتر است. Graphcool برای پروژه های کوچک ، بزرگ و در حال رشد مفید است.
برای راه‌ اندازی نمونه ، ابتدا باید ابزار Graphcool CLI را نصب کنید. این ابزار دستورهایی را برای ایجاد سرور مجازی های جدید GraphQL ، به روزرسانی آنها و همچنین استقرار آنها ارائه می دهد. همچنین می تواند برای مدیریت توابع ابری Graphcool مورد استفاده قرار گیرد. دستور زیر را برای نصب اجرا کنید:
$ npm install -g graphcool-framework

به برنامه React که از طریق ترمینال تنظیم کرده ایم بروید و یک سرور مجازی جدید Graphool را راه اندازی کنید:
$ graphcool-framework init server

•
این دستور یک پوشه در پروژه React به نام server ایجاد می کند. دستور server حاوی تعاریف نوع و شماتیک برای داده های GraphQL شماست. برای کسب اطلاعات بیشتر در مورد اصول GraphQL می توانید به مقاله درک جستارهای API GraphQL و همچنین مقالاتی در این لینک جستجو مراجعه کنید.
برای برنامه چت ما ، فقط باید روی فایل types.graphql تولید شده در پوشه سرور مجازی تمرکز کنیم. اینجاست که به GraphQl می گویید ساختار داده های شما چگونه است. این کار به تعریف نوع شناخته شده است. محتوای آن را با موارد زیر جایگزین کنید:
type Chat @model {
id: ID! @isUnique
from: String!
content: String!
createdAt: DateTime!
}

باید این شماتیک را در سرور مجازی Graphcool به کار گیرید:
$ graphcool-framework deploy

این دستور ابتدا یک مرورگر برای شما باز می کند تا یک حساب Graphcool را راه اندازی کنید و سپس نمونه خود را مستقر کنید. می توانید نمونه را از منوی سمت چپ بالای داشبورد Graphcool خود باز کنید.
در این ترمینال ، فرآیند یک URL مهم را برای تعامل با سرور مجازی Graphcool شما چاپ می کند. لطفاً این URL را در جایی ذخیره کنید که بتوانید به آنها مراجعه کنید.
هنگامی که برنامه مستقر شد ، playground را باز کنید تا آزمایش کنید آیا روند استقرار ، تمام تعاریف نوع شما را در جای خود قرار داده است یا خیر:
graphcool-framework playground

جستار و جهش زیر را در ویرایشگر در سمت چپ اجرا کنید و برای راه اندازی آنها روی دکمه اجرا کلیک کنید:
query FETCH_CHATS{
allChats{
from,
content
}
}

mutation CREATE_CHAT {
createChat(content: “test”, from: “test”) {
content,
from
}
}

playground از شما می پرسد کدام یک از دستوراتی را که می خواهید اجرا کنید:
نمونه GraphQL را به React ارائه دهید
یک پروژه React و یک سرور مجازی GraphQL آماده است. بعدش چی؟ باید آنها را با تمام ماژول هایی که با فایل pack.json نصب کردیم ، گره بزنیم.
بیایید با وارد کردن آنها شروع کنیم. فایل ورودی src / index.js را برای وارد کردن متعلقات زیر به روز کنید:
src/index.js
import { ApolloProvider } from ‘react-apollo’;
import { ApolloClient } from ‘apollo-client’;
import { HttpLink } from ‘apollo-link-http’;
import { InMemoryCache } from ‘apollo-cache-inmemory’;
import { ApolloLink, split } from ‘apollo-client-preset’
import { WebSocketLink } from ‘apollo-link-ws’
import { getMainDefinition } from ‘apollo-utilities’

درست در زیر ورودی ها ، پیوند WebSocket را پیکربندی کنید. می توانید این کار را با استفاده از ماژول WebSocketLink انجام دهید:
src/index.js
…
const wsLink = new WebSocketLink({

uri: ‘[Subscriptions API URI]’,
options: {
reconnect: true
}
})

عملکرد سازنده با استفاده از گزینه های پیکربندی یک آبجکت را می گیرد. uri مورد نیاز است و باید همان Subscriptions API URI باشد که پس از استقرار دریافت کردید. ما از گزینه اتصال مجدد استفاده خواهیم کرد تا از WebSocket بخواهیم دوباره پس از یک تلاش ناموفق دوباره برای اتصال تلاش کند.
ما فقط در حال ایجاد ارتباط WebSocket نیستیم. بلکه برای انجام عملیات درخواست-پاسخگویی باید یک اتصال HTTP را تنظیم کنیم. این محتوا را درست زیر ستاپ پیوند WebSocket اضافه کنید:
src/index.js
…
const httpLink = new HttpLink({ uri: ‘[SIMPLE API URI]’ })

همانند سازنده WebSocketLink است اما از API URI ساده استفاده می کند. لازم نیست از هیچ گزینه پیکربندی عبور کنیم.
در این مرحله دو لینک داریم. ما از روش spliet استفاده خواهیم کرد تا به سرور مجازی بگوییم چه زمانی از کدام لینک استفاده کند:
src/index.js
…
const link = split(

({ query }) => {
const { kind, operation } = getMainDefinition(query)
return kind === ‘OperationDefinition’ && operation === ‘subscription’
},
wsLink,
httpLink,
)

روش split سه آرگومان میگیرد. اولی تستی است که یک بولین را برمی گرداند. اگر مقدار بولی (دو بایتی) true باشد ، درخواست به آرگومان دوم(wsLink) ارسال می شود. اگر نادرست باشد ، به آرگومان سوم (httpLink) ارسال می شود.
اکنون می توانیم یک کلاینت Apollo با لینک برگشتی ایجاد کنیم:
src/index.js
…
const client = new ApolloClient({

link,
cache: new InMemoryCache()
})

با استفاده از URL های ارائه شده می توانید مستقیماً به سرور مجازی خود درخواست دهید. این کار نسبت به کتابخانه بسته بندی که عملکرد هایی را برای ساده کردن تعامل سرور مجازی فراهم می کند، کمی نابه سامان تر است. Apollo یکی از این کتابخانه ها است.
با استفاده از مؤلفه AppProvider کلاینت را ارائه دهید:
src/index.js
…
ReactDOM.render(

<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById(‘root’)
);

جستجوی سرور مجازی GraphQL
با پیوند بین برنامه React و مجموعه GraphQL ، زمان آن رسیده است که پرس و جو از پایگاه داده و نمایش داده ها در مرورگر آغاز شود.
src / App.js را برای تنظیم یک جستار به روز کنید:
src/App.js
import React, { Component } from ‘react’;

// Import GraphQL helpers
import { graphql } from ‘react-apollo’;
import gql from ‘graphql-tag’;

// App component styles
import ‘./App.css’;

class App extends Component {
state = {
from: ‘anonymous’,
content: ”
};
componentDidMount() {
// Get username form prompt
// when page loads
const from = window.prompt(‘username’);
from && this.setState({ from });
}
render() {
// Coming up next
}
}

const ALL_CHATS_QUERY = gql`
query AllChatsQuery {
allChats {
id
createdAt
from
content
}
}
`;

export default graphql(ALL_CHATS_QUERY, { name: ‘allChatsQuery’ })(App);

بیایید آنچه را که در اینجا اتفاق می افتد تجزیه کنیم:
ابتدا grafl و gql را وارد می کنیم. این کتابخانه ها به ترتیب به تنظیم و تجزیه پرس و جو کمک می کنند.
در پایان تعریف کلاس کامپوننت ، query را ایجاد می کنیم. دقیقاً شبیه کارهایی است که ما در playground انجام دادیم اما با استفاده از برچسب قالب به روش gql پیچیده شده است.
از HOC graphql استفاده می شود تا نتیجه این پرس و جو را به ویژگی های مؤلفه برنامه نشان دهد.
اکنون می توانید از طریق props پرس و جو را در DOM ارائه دهید:
// Chatbox UI component
import Chatbox from ‘./components/Chatbox’;

class App extends Component {

//…

render() {
const allChats = this.props.allChatsQuery.allChats || [];
return (
<div className=””>
<div className=”container”>
<h2>Chats</h2>
{allChats.map(message => (
<Chatbox key={message.id} message={message} />
))}
</div>
</div>
);
}
}

// …

export default graphql(ALL_CHATS_QUERY, { name: ‘allChatsQuery’ })(App);

روش ارائه حول هر یک از نتایج پرس و جو تکرار می شود و آنها را با استفاده از مؤلفه Chatbox روی صفحه چاپ می کند. این همان شکل کامپوننت در components/Chatbox.js: میباشد:
import React from ‘react’;
import ‘./Chatbox.css’
const Chatbox = ({message}) => (
<div className=”chat-box”>
<div className=”chat-message”>
<h5>{message.from}</h5>
<p>
{message.content}
</p>
</div>
</div>
);
export default Chatbox;

برای بدست آوردن سبک های اصلی Chatbox.css و App.css می توانید به repo مراجعه کنید.
ایجاد پیام های جدید
جهش ها در GraphQL برای ایجاد ، ویرایش و حذف مقادیر از پایگاه داده شما استفاده می شود. جایی که یک جستار R (Read) در CRUD است ، یک جهش می تواند CUD (ایجاد ، به روز رسانی ، حذف) باشد. ما در حال حاضر قادر به خواندن پیام های موجود در برنامه چت خود هستیم. مورد بعدی که باید به آن توجه کنیم ایجاد پیامهایی از سوی برنامه React میباشد.
درست مانند روشی که یک پرس و جو ایجاد کردیم ، می توانیم جهشی نیز ایجاد کنیم:
import { graphql, compose } from ‘react-apollo’;

// App component …

const CREATE_CHAT_MUTATION = gql`
mutation CreateChatMutation($content: String!, $from: String!) {
createChat(content: $content, from: $from) {
id
createdAt
from
content
}
}
`;

export default compose(
graphql(ALL_CHATS_QUERY, { name: ‘allChatsQuery’ }),
graphql(CREATE_CHAT_MUTATION, { name: ‘createChatMutation’ })
)(App);

جهش بسیار شبیه به یک پرس و جو است اما پارامترها و محتوایی دریافت میکند. ما باید مؤلفه برنامه را در این جهش و جستار موجود محاصره کنیم. به همین دلیل روش کامپوزیت را نیز وارد می کنیم و از این روش برای پیچیدن هر دو HOC استفاده می کنیم.
در روش رندر ، می توانیم یک عنصر ورودی داشته باشیم که این محتوای پیام را جمع آوری کند:
render() {
const allChats = this.props.allChatsQuery.allChats || [];
return (
<div className=””>
<div className=”container”>
<h2>Chats</h2>
{allChats.map(message => (
<Chatbox key={message.id} message={message} />
))}

{/* Message content input */}
<input
value={this.state.content}
onChange={e => this.setState({ content: e.target.value })}
type=”text”
placeholder=”Start typing”
onKeyPress={this._createChat}
/>
</div>
</div>
);
}
}

ورودی باعث ایجاد یک رویداد در هر keyPress می شود و این رویداد متد _createChat نامیده می شود. در اینجا تعریف این روش در کلاس App آمده است:
_createChat = async e => {
if (e.key === ‘Enter’) {
const { content, from } = this.state;
await this.props.createChatMutation({
variables: { content, from }
});
this.setState({ content: ” });
}
};

ما فقط می خواهیم هنگام فشار دادن کلید enter ، جهش را اجرا کنیم. توجه کنید که چگونه CreatChatMutation نیز در props قرار می گیرد و متغیر به عنوان یک شیء به روش جهش منتقل می شود.
هنگام ارسال پیام جدید ، هیچ اتفاقی نمی افتد تا مجدد لود کنید.
این کار، به روزرسانی های زمان حقیقی را فراخوانی می کند.
تنظیم اشتراک زمان حقیقی
اشتراک در GraphQL برای ردیابی تغییرات ایجاد شده توسط کلاینت های متصل شده استفاده می شود. این کلاینت ها می توانند بر اساس این تغییرات عمل کنند. احتمالاً با به روزرسانی رابط کاربری با داده های تغییر یافته یا حتی ارسال نوتیفیکیشن این کار انجام میشود. فن آوری که اشتراک را تقویت می کند ، WebSockets مشهور است.
برای تنظیم اشتراک ، این روش را به کلاس App اضافه کنید:
_subscribeToNewChats = () => {
this.props.allChatsQuery.subscribeToMore({
document: gql`
subscription {
Chat(filter: { mutation_in: [CREATED] }) {
node {
id
from
content
createdAt
}
}
}
`,
updateQuery: (previous, { subscriptionData }) => {
const newChatLinks = [
…previous.allChats,
subscriptionData.data.Chat.node
];
const result = {
…previous,
allChats: newChatLinks
};
return result;
}
});
};

allChatsQuery یک روش SubscribToMore را در معرض دید شما قرار می دهد. پس از فراخوانی این روش ، کانال ارتباطی در زمان حقیقی باز می شود. این روش آبجکتی دریافت می کند که می توانیم سند پرس و جو و یک متد updateQuery را تعریف کنیم.
این سند اشتراکی را تعریف کرده و به دنبال این میگردد که قبل از شروع یک رویداد ، چه زمان جهش در chat رخ می دهد. روش بروزرسانی مقدار قدیمی و جدید را دریافت می کند و ما برای به روز کردن مقدار قدیمی از این مقادیر جدید استفاده می کنیم.
می توانید این اشتراک را با روش چرخه عمر componentDidMount شروع کنید:
پس از اجرای مجدد ، یک برنامه چت کاری خواهید داشت.
مطالب بیشتر
مجموعه آموزش هایGraphQL شما را در مراحل یادگیری اصول GraphQL راهنمایی می کنند.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade