अजगर और Django में एक चैट लेखन

शुभ दोपहर, दोस्तों। पायथन वेब डेवलपर पाठ्यक्रम की शुरुआत की प्रत्याशा में , हम पारंपरिक रूप से आपके साथ एक उपयोगी अनुवाद साझा करते हैं।

---

आप अपने सामने एक गाइड देखते हैं जो आपको बताता है कि पायथन, Django और रिएक्ट में एक चैट एप्लिकेशन कैसे बनाया जाए।

अन्य मैनुअल के विपरीत, मैं WebSocket कनेक्शन के लिए पायथन और Django का उपयोग नहीं करता हूं। इस तथ्य के बावजूद कि यह तकनीकी दृष्टिकोण से अच्छा लगता है, यह सुस्त रूप से काम करता है और अपने आप में महंगा है, खासकर यदि आपके पास उपयोगकर्ताओं की एक सभ्य संख्या है। C ++, Go और Elixir जैसी भाषाएं चैट कोर का बेहतर काम करती हैं।

इस ट्यूटोरियल में, हम स्ट्रीम, एक चैट एपीआई का उपयोग करेंगे जो कि वेबसॉकेट कनेक्शन और अन्य भारी पहलुओं का ध्यान रखता है, जिसमें गो, रफट और रॉक्सडीबी का उपयोग किया जाता है।

सामग्री:

• रिएक्ट डेमो चैट इंटरफ़ेस
• Django / पायथन स्थापित करें
• उपयोगकर्ता प्राधिकरण
• Django बाकी ढांचा
• चैट स्ट्रीम सर्वर तक पहुंच के लिए टोकन पीढ़ी
• प्रतिक्रिया प्राधिकरण एकीकरण
• पायथन सर्वर से संदेश भेजना
• अंतिम विचार

एक लेख से कोड के साथ Github भंडार

चलो शुरू हो जाओ!

चरण 1: प्रतिक्रिया डेमो चैट इंटरफ़ेस

इससे पहले कि हम पायथन भाग के बारे में सोचना शुरू करें, आइए प्रतिक्रिया पर एक सरल इंटरफ़ेस तैनात करें ताकि हमारे पास कुछ सुंदर और दृश्य हो:

$ yarn global add create-react-app $ brew install node && brew install yarn # skip if installed $ create-react-app chat-frontend $ cd chat-frontend $ yarn add stream-chat-react 

निम्नलिखित के साथ कोड को src/App.js में बदलें:

 import React from "react"; import { Chat, Channel, ChannelHeader, Thread, Window } from "stream-chat-react"; import { MessageList, MessageInput } from "stream-chat-react"; import { StreamChat } from "stream-chat"; import "stream-chat-react/dist/css/index.css"; const chatClient = new StreamChat("qk4nn7rpcn75"); // Demo Stream Key const userToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiY29vbC1za3ktOSJ9.mhikC6HPqPKoCP4aHHfuH9dFgPQ2Fth5QoRAfolJjC4"; // Demo Stream Token chatClient.setUser( { id: "cool-sky-9", name: "Cool sky", image: "https://getstream.io/random_svg/?id=cool-sky-9&name=Cool+sky" }, userToken ); const channel = chatClient.channel("messaging", "godevs", { // image and name are required, however, you can add custom fields image: "https://cdn.chrisshort.net/testing-certificate-chains-in-go/GOPHER_MIC_DROP.png", name: "Talk about Go" }); const App = () => ( <Chat client={chatClient} theme={"messaging light"}> <Channel channel={channel}> <Window> <ChannelHeader /> <MessageList /> <MessageInput /> </Window> <Thread /> </Channel> </Chat> ); export default App; 

अब, कार्रवाई में चैट देखने के लिए yarn start कमांड का उपयोग करें!

चरण 2: Django / Python स्थापित करें (यदि आपके पास पहले से ही आपकी जरूरत की सभी चीजें हैं तो इस चरण को छोड़ दें)

सुनिश्चित करें कि आपके पास पायथन 3.7 है और यह चल रहा है:

 $ brew install python3 $ pip install virtualenv virtualenvwrapper $ export WORKON_HOME=~/Envs $ source /usr/local/bin/virtualenvwrapper.sh $ mkvirtualenv chatexample -p `which python3` $ workon chatexample 

यदि यह काम नहीं करता है, तो निम्न कोड का प्रयास करें:

 $ python3 -m venv chatexample $ source chatexample/bin/activate 

अब जब आप अपने आभासी वातावरण में हैं, तो आपको स्टार्टअप पर अजगर 3 देखना चाहिए:

 $ python --version 

Django में एक नया प्रोजेक्ट बनाने के लिए, निम्न कोड का उपयोग करें:

 $ pip install django $ django-admin startproject mychat 

और एप्लिकेशन चलाएँ:

 $ cd mychat $ python manage.py runserver 

अब जब आप http://localhost:8000 खोलते हैं, तो आप निम्नलिखित देखेंगे:

चरण 3: उपयोगकर्ता प्राधिकरण

अगला कदम Django में उपयोगकर्ता प्राधिकरण को कॉन्फ़िगर करना है।

 $ python manage.py migrate $ python manage.py createsuperuser $ python manage.py runserver 

http://localhost:8000/admin/ और लॉग इन करें। देखा!

आपको नीचे एक व्यवस्थापक टैब दिखाई देगा:

चरण 4: Django बाकी फ्रेमवर्क

Django के साथ रिएक्ट को एकीकृत करने के लिए मेरा पसंदीदा पैकेज Django रेस्ट फ्रेमवर्क है। इसे काम करने के लिए, आपको इसके लिए समापन बिंदु बनाने की आवश्यकता है:

• उपयोगकर्ता पंजीकरण
• उपयोगकर्ता लॉगिन।

हम उन्हें खुद बना सकते हैं, हालांकि एक पैकेज है जिसे Djoser कहा जाता है जो इस समस्या को हल करता है। यह उपयोगकर्ता पंजीकरण, लॉगिन, पासवर्ड रीसेट आदि के लिए आवश्यक एपीआई एंडपॉइंट को कॉन्फ़िगर करेगा।

Djoser स्थापित करने के लिए, निम्नलिखित का उपयोग करें:

 $ pip install djangorestframework djoser 

उसके बाद, urls.py संपादित करें और फ़ाइल की सामग्री को निम्नानुसार बदलें:

 from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('auth/', include('djoser.urls')), path('auth/', include('djoser.urls.authtoken')), ] 

जब किया जाता है, तो settings.py संपादित करें और परिवर्तन करें:

 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'rest_framework.authtoken', 'djoser', ] REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework.authentication.TokenAuthentication', ) } 

Djoser प्रदान करने वाले एपीआई एंडपॉइंट्स के बारे में अधिक जानकारी के लिए, निम्नलिखित देखें:

https://djoser.readthedocs.io/en/latest/sample_usage.html

अब चलो जारी रखें और पंजीकरण समापन बिंदु का परीक्षण करें:

 $ curl -X POST http://127.0.0.1:8000/auth/users/ --data 'username=djoser&password=alpine12' 

चरण 5: चैट स्ट्रीम सर्वर तक पहुंचने के लिए टोकन जनरेट करें

अब हमें स्ट्रीम टोकन जेनरेट करने के लिए Djoser दृश्यों को कॉन्फ़िगर करने की आवश्यकता है। तो चलिए शुरू करते हैं।
आइए हमारी फाइलों को थोड़ा व्यवस्थित करें और हमारी परियोजना में एक चैट एप्लिकेशन फ़ोल्डर बनाएं (सुनिश्चित करें कि आप सही निर्देशिका में हैं):

 $ python manage.py startapp auth 

स्ट्रीम-चैट स्थापित करें:

 $ pip install stream-chat 

निम्नलिखित तर्क का उपयोग करके, एक कस्टम सीरियल निर्माता को auth/serializers.py serializers.py में बनाएँ:

 from djoser.serializers import TokenSerializer from rest_framework import serializers from djoser.conf import settings as djoser_settings from stream_chat import StreamChat from django.conf import settings class StreamTokenSerializer(TokenSerializer): stream_token = serializers.SerializerMethodField() class Meta: model = djoser_settings.TOKEN_MODEL fields = ('auth_token','stream_token') def get_stream_token(self, obj): client = StreamChat(api_key=settings.STREAM_API_KEY, api_secret=settings.STREAM_API_SECRET) token = client.create_token(obj.user.id) return token 

अंतिम रूप से settings.py फ़ाइल को अपडेट करने के लिए एक कस्टम क्रमिक का उपयोग करें:

 STREAM_API_KEY = YOUR_STREAM_API_KEY # https://getstream.io/dashboard/ STREAM_API_SECRET = YOUR_STREAM_API_SECRET DJOSER = { 'SERIALIZERS': { 'token': 'auth.serializers.StreamTokenSerializer', } } 

माइग्रेशन पुनरारंभ करें:

 $ python manage.py migrate 

यह सत्यापित करने के लिए कि यह काम करता है, POST अनुरोध का उपयोग करके समापन बिंदु पर जाएं:

 $ curl -X POST http://127.0.0.1:8000/auth/token/login/ --data 'username=djoser&password=alpine12' 

वापसी करना चाहिए

चरण 6: प्रतिक्रिया प्राधिकरण को एकीकृत करें

स्पष्ट कारणों के लिए, दृश्यपटल पर प्राधिकरण जोड़ना एक महत्वपूर्ण कदम है। हमारे मामले में, यह विशेष रूप से उपयोगी है, क्योंकि हम एपीआई (जो पायथन पर चलता है) से उपयोगकर्ता टोकन निकाल सकते हैं और संदेश भेजते समय गतिशील रूप से इसका उपयोग कर सकते हैं।

सबसे पहले, CORS स्थापित करें, जोजियो के लिए मिडिलवेयर पैकेज:

 $ pip install django-cors-headers 

फिर djors-cors-header को संदर्भित करने के लिए settings.py फ़ाइल को संशोधित करें:

 INSTALLED_APPS = ( ... 'corsheaders', ... ) MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ] 

अंत में, अपनी settings.py में निम्नलिखित को जोड़ दें:

 CORS_ORIGIN_ALLOW_ALL = True 

अगले चरण में आपके इंटरफ़ेस में कुछ बदलावों की आवश्यकता होगी। आरंभ करने के लिए, आपको यह सुनिश्चित करना होगा कि आपके पास यार्न के माध्यम से स्थापित सभी निर्भरताएं हैं:

 $ yarn add axios react-dom react-router-dom 

अगला, src/ निर्देशिका में निम्नलिखित फाइलें बनाएँ:

• AuthedRoute.js
• UnauthedRoute.js
• withSession.js
• Login.js
• Chat.js

App.js

 import React from "react"; import { BrowserRouter as Router, Switch } from "react-router-dom"; import Chat from "./Chat"; import Login from "./Login"; import UnauthedRoute from "./UnauthedRoute"; import AuthedRoute from "./AuthedRoute"; const App = () => ( <Router> <Switch> <UnauthedRoute path="/auth/login" component={Login} /> <AuthedRoute path="/" component={Chat} /> </Switch> </Router> ); export default App; 

AuthedRoute.js

 import React from "react"; import { Redirect, Route } from "react-router-dom"; const AuthedRoute = ({ component: Component, loading, ...rest }) => { const isAuthed = Boolean(localStorage.getItem("token")); return ( <Route {...rest} render={props => loading ? ( <p>Loading...</p> ) : isAuthed ? ( <Component history={props.history} {...rest} /> ) : ( <Redirect to={{ pathname: "/auth/login", state: { next: props.location } }} /> ) } /> ); }; export default AuthedRoute; 

UnauthedRoute.js

 import React from "react"; import { Redirect, Route } from "react-router-dom"; const AuthedRoute = ({ component: Component, loading, ...rest }) => { const isAuthed = Boolean(localStorage.getItem("token")); return ( <Route {...rest} render={props => loading ? ( <p>Loading...</p> ) : !isAuthed ? ( <Component history={props.history} {...rest} /> ) : ( <Redirect to={{ pathname: "/" }} /> ) } /> ); }; export default AuthedRoute; 

withSession.js

 import React from "react"; import { withRouter } from "react-router"; export default (Component, unAuthed = false) => { const WithSession = ({ user = {}, streamToken, ...props }) => user.id || unAuthed ? ( <Component userId={user.id} user={user} session={window.streamSession} {...props} /> ) : ( <Component {...props} /> ); return withRouter(WithSession); }; 

Login.js

 import React, { Component } from "react"; import axios from "axios"; class Login extends Component { constructor(props) { super(props); this.state = { loading: false, email: "", password: "" }; this.initStream = this.initStream.bind(this); } async initStream() { await this.setState({ loading: true }); const base = "http://localhost:8000"; const formData = new FormData(); formData.set("username", this.state.email); formData.set("password", this.state.password); const registration = await axios({ method: "POST", url: `${base}/auth/users/`, data: formData, config: { headers: { "Content-Type": "multipart/form-data" } } }); const authorization = await axios({ method: "POST", url: `${base}/auth/token/login/`, data: formData, config: { headers: { "Content-Type": "multipart/form-data" } } }); localStorage.setItem("token", authorization.data.stream_token); await this.setState({ loading: false }); this.props.history.push("/"); } handleChange = e => { this.setState({ [e.target.name]: e.target.value }); }; render() { return ( <div className="login-root"> <div className="login-card"> <h4>Login</h4> <input type="text" placeholder="Email" name="email" onChange={e => this.handleChange(e)} /> <input type="password" placeholder="Password" name="password" onChange={e => this.handleChange(e)} /> <button onClick={this.initStream}>Submit</button> </div> </div> ); } } export default Login; 

Chat.js

 import React, { Component } from "react"; import { Chat, Channel, ChannelHeader, Thread, Window } from "stream-chat-react"; import { MessageList, MessageInput } from "stream-chat-react"; import { StreamChat } from "stream-chat"; import "stream-chat-react/dist/css/index.css"; class App extends Component { constructor(props) { super(props); this.client = new StreamChat("<YOUR_STREAM_APP_ID>"); this.client.setUser( { id: "cool-sky-9", name: "Cool Sky", image: "https://getstream.io/random_svg/?id=cool-sky-9&name=Cool+sky" }, localStorage.getItem("token") ); this.channel = this.client.channel("messaging", "godevs", { image: "https://cdn.chrisshort.net/testing-certificate-chains-in-go/GOPHER_MIC_DROP.png", name: "Talk about Go" }); } render() { return ( <Chat client={this.client} theme={"messaging light"}> <Channel channel={this.channel}> <Window> <ChannelHeader /> <MessageList /> <MessageInput /> </Window> <Thread /> </Channel> </Chat> ); } } export default App; 

डैशबोर्ड पर पाए जाने वाले मान्य स्ट्रीम ऐप आईडी के साथ YOUR_STREAM_APP_ID को बदलना सुनिश्चित करें।

सामने के छोर पर एप्लिकेशन को पुनरारंभ करें और आप प्राधिकरण देखेंगे! अपना ईमेल पता और पासवर्ड दर्ज करें, टोकन का अनुरोध किया जाएगा और स्थानीय भंडारण में संग्रहीत किया जाएगा।

चरण 7: पायथन सर्वर से संदेश भेजना

यदि आप अचानक पायथन में अपने बैकएंड का उपयोग करके चैट एपीआई बनाना चाहते हैं, तो एक विशेष कमांड है जिसे आप उपयोग कर सकते हैं।

सुनिश्चित करें कि इंस्टॉल किए गए एप्लिकेशन settings.py में इस तरह दिखते settings.py :

 INSTALLED_APPS = [ 'corsheaders', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'rest_framework.authtoken', 'djoser', ] 

इसके बाद, चैट / प्रबंधन / कमांड निर्देशिका बनाएं। इस निर्देशिका में, broadcast.py सामग्री नामक एक फ़ाइल को निम्न सामग्रियों के साथ जोड़ें:

 from django.core.management.base import BaseCommand, CommandError from django.conf import settings from stream_chat import StreamChat class Command(BaseCommand): help = 'Broadcast the message on your channel' def add_arguments(self, parser): parser.add_argument('--message') def handle(self, *args, **options): client = StreamChat(api_key=settings.STREAM_API_KEY, api_secret=settings.STREAM_API_SECRET) client.update_user({"id": "system", "name": "The Server"}) channel = client.channel("messaging", "kung-fu") channel.create("system") response = channel.send_message({"text": "AMA about kung-fu"}, 'system') self.stdout.write(self.style.SUCCESS('Successfully posted a message with id "%s"' % response['message']['id'])) 

आप निम्नानुसार चैट संदेश भेजने का प्रयास कर सकते हैं:

 $ python manage.py broadcast --message hello 

और आप इस प्रतिक्रिया को देखेंगे:

अंतिम विचार

मुझे आशा है कि आपने Django, Python और React में एक चैट एप्लिकेशन बनाने पर इस ट्यूटोरियल का आनंद लिया!

स्ट्रीम चैट के इंटरेक्टिव दौरे के लिए, कृपया स्ट्रीम वेबसाइट पर एपीआई बनाने पर हमारे गाइड पर एक नज़र डालें। यदि आप स्ट्रीम चैट रिएक्ट घटकों के लिए कोड में खुदाई का आनंद लेते हैं, तो आप यहां पूर्ण प्रलेखन पा सकते हैं। यदि आप स्ट्रीम पर एक चैट बनाना चाहते हैं, तो हम लोकप्रिय एसडीके और नवीनतम आईओएस (स्विफ्ट) तक की विभिन्न एसडीके की पेशकश करके प्रसन्न हैं।

वह सब है। आपको Django ORM ट्रिक्स पर खुले वेबिनार में मिलते हैं ।