ਚੈਟਕਿਟ ਦੇ ਨਾਲ ਇੱਕ ਐਂਗੂਲਰ 7 ਚੈਟ ਐਪ ਵਿੱਚ ਪ੍ਰਾਈਵੇਟ ਕਮਰੇ ਬਣਾਉ ਅਤੇ ਵਰਤੋ
ਜੇ ਤੁਸੀਂ ਇਸ ਲੇਖ ਵਿਚ ਵਰਤੇ ਗਏ ਸੰਪੂਰਨ ਕੋਡ ਨੂੰ ਫੜਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਵੱਲ ਜਾਓ GitHub ਰਿਪੋਜ਼ਟਰੀ ਅਤੇ ਵਿੱਚ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ README.md ਫਾਈਲ.
ਈਮੇਲ ਜਾਂ ਫ਼ੋਨ ਨੰਬਰ ਤੋਂ ਬਿਨਾਂ ਪੁਰਾਣੇ ਕੈਸ਼ ਐਪ ਖਾਤੇ ਨੂੰ ਕਿਵੇਂ ਐਕਸੈਸ ਕਰਨਾ ਹੈ
ਪੂਰਵ -ਸ਼ਰਤਾਂ
ਐਂਗੁਲਰ ਅਤੇ ਨੋਡ.ਜੇਐਸ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਦੇ ਨਾਲ ਪਿਛਲਾ ਤਜ਼ਰਬਾ ਲਾਜ਼ਮੀ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਚੈਟਕਿਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ. ਤੁਹਾਨੂੰ Node.js (ਸੰਸਕਰਣ 6 ਜਾਂ ਬਾਅਦ ਦੇ) ਦੇ ਨਾਲ ਨਾਲ ਆਪਣੀ ਮਸ਼ੀਨ ਤੇ ਸਥਾਪਤ npm ਦੀ ਵੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ. ਨੋਡ ਅਤੇ ਐਨਪੀਐਮ ਦੋਵਾਂ ਲਈ ਇੰਸਟਾਲੇਸ਼ਨ ਨਿਰਦੇਸ਼ ਪ੍ਰਾਪਤ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ ਇਹ ਪੰਨਾ .
ਚੈਟਕਿਟ ਲਈ ਸਾਈਨ ਅਪ ਕਰੋ
ਆਪਣੀ ਅਰਜ਼ੀ ਵਿੱਚ ਚੈਟਕਿਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਲਾਭ ਲੈਣ ਲਈ, ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ ਇੱਕ ਮੁਫਤ ਖਾਤੇ ਲਈ ਸਾਈਨ ਅਪ ਕਰੋ Pusher ਤੱਕ. ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡਾ ਖਾਤਾ ਬਣ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਸ ਤੇ ਭੇਜਿਆ ਜਾਵੇਗਾ ਚੈਟਕਿਟ ਪੰਨਾ . ਆਪਣੀ ਅਰਜ਼ੀ ਲਈ ਇੱਕ ਨਵੀਂ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਬਣਾਉ, ਫਿਰ ਪ੍ਰਮਾਣ -ਪੱਤਰ ਆਪਣੇ ਉਦਾਹਰਣ ਦੇ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਟੈਬ ਕਰੋ ਅਤੇ ਨੋਟ ਕਰੋ ਇੰਸਟੈਂਸ ਲੋਕੇਟਰ ਅਤੇ ਗੁਪਤ ਕੁੰਜੀ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਉਨ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਸਰਵਰ ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਕੋਡ ਵਿੱਚ ਕਰਾਂਗੇ.
ਅੱਗੇ, ਹਿੱਟ ਕਰੋ ਕੰਸੋਲ ਟੈਬ ਅਤੇ ਇੱਕ ਨਵਾਂ ਉਪਭੋਗਤਾ ਅਤੇ ਇੱਕ ਨਵਾਂ ਜਨਤਕ ਕਮਰਾ ਬਣਾਉ. ਤੁਸੀਂ ਕਰ ਸੱਕਦੇ ਹੋ ਇਸ ਪੰਨੇ 'ਤੇ ਦਿੱਤੀਆਂ ਹਿਦਾਇਤਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ਇਹ ਕਿਵੇਂ ਕਰਨਾ ਹੈ ਸਿੱਖਣ ਲਈ. ਕਮਰੇ ਦੀ ਆਈਡੀ ਦਾ ਧਿਆਨ ਰੱਖੋ ਕਿਉਂਕਿ ਅਸੀਂ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਇਸਤੇਮਾਲ ਕਰਾਂਗੇ.
ਐਪਲੀਕੇਸ਼ਨ ਸਰਵਰ ਸੈਟ ਅਪ ਕਰੋ
ਆਪਣੇ ਫਾਈਲ ਸਿਸਟਮ ਵਿੱਚ ਇਸ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਨਵੀਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਉ ਅਤੇ | _+_ | ਆਪਣੀ ਟਰਮੀਨਲ ਐਪਲੀਕੇਸ਼ਨ ਦੁਆਰਾ ਇਸ ਵਿੱਚ ਦਾਖਲ ਹੋਵੋ. ਫਿਰ ਚਲਾਓ | _+_ | ਆਪਣੀ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ ਤੋਂ ਆਪਣੇ ਨੋਡ ਪ੍ਰੋਜੈਕਟ ਨੂੰ | _+_ | ਨਾਲ ਅਰੰਭ ਕਰਨ ਲਈ ਫਾਈਲ.
ਐਪਲੀਕੇਸ਼ਨ ਸਰਵਰ ਬਣਾਉਣ ਲਈ ਸਾਨੂੰ ਸਾਰੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੀਆਂ ਕਮਾਂਡਾਂ ਚਲਾਉ:
cdਅੱਗੇ, ਇੱਕ | _+_ | ਬਣਾਉ ਆਪਣੀ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਦੇ ਰੂਟ ਵਿੱਚ ਫਾਈਲ ਕਰੋ ਅਤੇ ਆਪਣੇ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਡੈਸ਼ਬੋਰਡ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਪ੍ਰਮਾਣ ਪੱਤਰਾਂ ਵਿੱਚ ਪੇਸਟ ਕਰੋ:
npm init -yਅੱਗੇ, | _+_ | ਨਾਂ ਦੀ ਇੱਕ ਹੋਰ ਫਾਈਲ ਬਣਾਉ ਅਤੇ ਇਸ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤਾ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ:
package.json| | _+_ | ਐਂਡਪੁਆਇੰਟ ਤੁਹਾਡੇ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕੀਤੇ | _+_ | ਦੇ ਨਾਲ ਇੱਕ ਨਵਾਂ ਉਪਭੋਗਤਾ ਬਣਾਉਂਦਾ ਹੈ ਜੇ ਉਹ ਆਈਡੀ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਨਹੀਂ ਹੈ. ਜਿਵੇਂ ਕਿ | _+_ |, ਇਹ ਉਹਨਾਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਤੁਹਾਡੀ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਨਾਲ ਜੁੜਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਨ, ਪਰ ਅਸੀਂ ਸੰਖੇਪਤਾ ਦੇ ਲਈ ਇੱਥੇ ਕਿਸੇ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਨਹੀਂ ਕਰਦੇ. ਇਸਦਾ ਅਰਥ ਇਹ ਹੈ ਕਿ ਜਿਹੜਾ ਵੀ ਵਿਅਕਤੀ ਚੈਟ ਰੂਮ ਨਾਲ ਜੁੜਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਉਸਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਪ੍ਰਮਾਣਿਕਤਾ ਦੇ ਪ੍ਰਵਾਹ ਦੇ ਪਹੁੰਚ ਦੀ ਆਗਿਆ ਦਿੱਤੀ ਜਾਏਗੀ.
ਸਾਨੂੰ ਸਰਵਰ ਸਾਈਡ ਤੇ ਇਹੀ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ. ਤੁਸੀਂ ਸਰਵਰ ਨੂੰ | _+_ | ਨਾਲ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ. 'ਤੇ ਉਪਲਬਧ ਹੋਵੇਗਾ http: // localhost: 5200 ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ | _+_ | ਨੂੰ ਨਹੀਂ ਬਦਲਦੇ | _+_ | ਵਿੱਚ ਪਰਿਵਰਤਨਸ਼ੀਲ ਫਾਈਲ.
ਐਂਗੂਲਰ ਐਪ ਨੂੰ ਬੂਟਸਟ੍ਰੈਪ ਕਰੋ
ਅਸੀਂ ਇਸ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਐਂਗੂਲਰ ਸੀ ਐਲ ਆਈ ਸਾਡੀ ਐਪ ਬਣਾਉਣ ਲਈ ਤਾਂ ਜੋ ਅਸੀਂ ਜਲਦੀ ਉੱਠ ਸਕੀਏ ਅਤੇ ਚੱਲ ਸਕੀਏ. ਸਭ ਤੋਂ ਪਹਿਲੀ ਗੱਲ ਇਹ ਹੈ ਕਿ ਇਸਨੂੰ ਹੇਠਾਂ ਦਿੱਤੀ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਦਿਆਂ ਵਿਸ਼ਵ ਪੱਧਰ ਤੇ ਸਥਾਪਤ ਕਰੋ:
.envਇੱਕ ਵਾਰ ਜਦੋਂ ਉਪਰੋਕਤ ਕਮਾਂਡ ਚੱਲਣੀ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ | _+_ | ਤੱਕ ਪਹੁੰਚ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਟਰਮੀਨਲ ਵਿੱਚ ਕਮਾਂਡ. ਯਕੀਨੀ ਬਣਾਉ ਕਿ ਤੁਸੀਂ ਆਪਣੀ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਦੇ ਮੂਲ ਤੇ ਹੋ, ਫਿਰ ਹੇਠਾਂ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਉ. ਜਦੋਂ ਐਂਗੂਲਰ ਰੂਟਿੰਗ ਨੂੰ ਜੋੜਨ ਲਈ ਪੁੱਛਿਆ ਜਾਂਦਾ ਹੈ, ਦਬਾਓ ਐਨ , ਅਤੇ ਚੁਣੋ CSS ਪਸੰਦੀਦਾ ਸਟਾਈਲਸ਼ੀਟ ਫਾਰਮੈਟ ਦੇ ਰੂਪ ਵਿੱਚ.
PORT=5200 CHATKIT_INSTANCE_LOCATOR= CHATKIT_SECRET_KEY= ਇਸਦੇ ਬਾਅਦ, | _+_ | | _+_ | ਵਿੱਚ ਫੋਲਡਰ ਅਤੇ ਅਤਿਰਿਕਤ ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਸਥਾਪਤ ਕਰੋ ਜਿਨ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਅਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਫਰੰਟਐਂਡ ਤੇ ਕਰਾਂਗੇ, ਜੋ ਕਿ ਹਨ ਧੁਰੇ HTTP ਬੇਨਤੀਆਂ ਕਰਨ ਲਈ ਲਾਇਬ੍ਰੇਰੀ, ਅਤੇ ਸਾਡੀ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਨਾਲ ਗੱਲਬਾਤ ਕਰਨ ਲਈ ਚੈਟਕਿਟ ਕਲਾਇੰਟ SDK.
server.jsਤੁਸੀਂ | _+_ | ਚਲਾ ਕੇ ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ ਅੰਦਰੋਂ | _+_ | ਡਾਇਰੈਕਟਰੀ. ਐਪ 'ਤੇ ਉਪਲਬਧ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ http: // localhost: 4200 .
ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਮਾਰਕਅਪ ਅਤੇ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ
ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਅਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਤਰਕ ਲਿਖਾਂ, ਆਓ ਐਪ ਲਈ ਕੁਝ ਮਾਰਕਅਪ ਅਤੇ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੀਏ. ਖੋਲ੍ਹੋ | _+_ | ਅਤੇ ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ ਬਦਲੋ:
require('dotenv').config({ path: '.env' }); const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const Chatkit = require('@pusher/chatkit-server'); const app = express(); const chatkit = new Chatkit.default({ instanceLocator: process.env.CHATKIT_INSTANCE_LOCATOR, key: process.env.CHATKIT_SECRET_KEY, }); app.use(cors()); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.post('/users', (req, res) => { const { userId } = req.body; chatkit .createUser({ id: userId, name: userId, }) .then(() => { res.sendStatus(201); }) .catch(err => { if (err.error === 'services/chatkit/user_already_exists') { console.log(`User already exists: ${userId}`); res.sendStatus(200); } else { res.status(err.status).json(err); } }); }); app.post('/authenticate', (req, res) => { const authData = chatkit.authenticate({ userId: req.query.user_id, }); res.status(authData.status).send(authData.body); }); app.set('port', process.env.PORT || 5200); const server = app.listen(app.get('port'), () => { console.log(`Express running → PORT ${server.address().port}`); }); ਅਸਲ ਵਿੱਚ, UI ਦੇ ਤਿੰਨ ਮੁੱਖ ਪਹਿਲੂ ਹਨ: ਖੱਬੀ ਸਾਈਡਬਾਰ ਜੋ ਹਰੇਕ ਕਮਰੇ ਵਿੱਚ ਉਪਭੋਗਤਾਵਾਂ ਦੀ ਸੂਚੀ ਰੱਖਦੀ ਹੈ, ਮੁੱਖ ਚੈਟ ਵਿੰਡੋ ਜਿੱਥੇ ਸੁਨੇਹੇ ਭੇਜੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਵੇਖੇ ਜਾਂਦੇ ਹਨ, ਅਤੇ ਸੱਜੀ ਸਾਈਡਬਾਰ ਜੋ ਉਹਨਾਂ ਸਾਰੇ ਕਮਰਿਆਂ ਦੀ ਸੂਚੀ ਬਣਾਉਂਦੀ ਹੈ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਉਪਭੋਗਤਾ ਲੌਗ ਇਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ. ਨੂੰ.
ਸਾਡੇ ਵਿੱਚ ਸ਼ੀਬਾ ਇਨੂ ਸਿੱਕਾ ਕਿਵੇਂ ਖਰੀਦਣਾ ਹੈ
ਚਲੋ ਅੱਗੇ ਵਧਦੇ ਹਾਂ ਅਤੇ ਐਪ ਲਈ ਸ਼ੈਲੀਆਂ ਜੋੜਦੇ ਹਾਂ. ਡਾ Downloadਨਲੋਡ ਕਰੋ ਪਿੰਜਰ CSS ਬਾਇਲਰਪਲੇਟ , ਜ਼ਿਪ ਫਾਈਲ ਐਕਸਟਰੈਕਟ ਕਰੋ ਅਤੇ ਕਾਪੀ ਕਰੋ | _+_ | ਅਤੇ | _+_ | ਤੋਂ | _+_ | ਤੁਹਾਡੇ | _+_ | ਵਿੱਚ ਫੋਲਡਰ ਡਾਇਰੈਕਟਰੀ. ਫਿਰ ਖੋਲ੍ਹੋ | _+_ | ਅਤੇ ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ ਬਦਲੋ:
/usersਅੱਗੇ, | _+_ | ਦੀ ਸਮਗਰੀ ਨੂੰ ਬਦਲੋ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ:
userIdਇਸ ਸਮੇਂ, ਐਪ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ:
ਉਪਭੋਗਤਾ ਦੀ ਪਛਾਣ ਕਰੋ
ਹੇਠਾਂ ਦਿੱਤਾ ਕੋਡ ਆਪਣੇ | _+_ | ਵਿੱਚ ਜੋੜੋ ਫਾਈਲ:
/authenticateਕਿਉਂਕਿ ਅਸੀਂ ਫਾਰਮਾਂ ਨਾਲ ਨਜਿੱਠ ਰਹੇ ਹਾਂ, ਸਾਨੂੰ ਆਯਾਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ | _+_ | ਜੋ ਟੈਂਪਲੇਟ-ਸੰਚਾਲਿਤ ਰੂਪਾਂ ਲਈ ਲੋੜੀਂਦੇ ਪ੍ਰਦਾਤਾਵਾਂ ਅਤੇ ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਨਿਰਯਾਤ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਾਡੇ | _+_ | ਵਿੱਚ ਉਪਲਬਧ ਕਰਵਾਉਂਦਾ ਹੈ:
node server.jsਹੁਣ, ਬਦਲੋ | _+_ | ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ:
PORTਬਦਲੋ | _+_ | ਉਚਿਤ ਦੇ ਤੌਰ ਤੇ.
ਜਦੋਂ ਕੋਈ ਐਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹੈ, ਤਾਂ ਸਾਨੂੰ ਉਹਨਾਂ ਦੇ ਜੁੜੇ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਉਹਨਾਂ ਦਾ ਉਪਯੋਗਕਰਤਾ ਨਾਮ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ.
ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ ਸਧਾਰਨ ਰੂਪ ਨਾਲ ਕਰ ਸਕਦੇ ਹਾਂ ਜੋ ਇੱਕ ਉਪਭੋਗਤਾ ਆਈਡੀ ਲਵੇਗਾ, ਅਤੇ ਫਾਰਮ ਜਮ੍ਹਾਂ ਕਰਨ ਤੇ, ਇਸਨੂੰ | _+_ | ਤੇ ਭੇਜੋ. ਐਂਡ ਪੁਆਇੰਟ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਬਣਾਇਆ ਸੀ ਤਾਂ ਜੋ ਇੱਕ ਨਵਾਂ ਚੈਟਕਿਟ ਉਪਭੋਗਤਾ ਬਣਾਇਆ ਜਾ ਸਕੇ ਜੇ ਉਸ ਉਪਭੋਗਤਾ ਆਈਡੀ ਵਾਲਾ ਕੋਈ ਮੌਜੂਦ ਨਹੀਂ ਹੈ.
ਉਪਭੋਗਤਾ ਨੂੰ ਕਮਰੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ
ਹੁਣ ਜਦੋਂ ਉਪਭੋਗਤਾ ਸਾਡੀ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਨਾਲ ਜੁੜਿਆ ਹੋਇਆ ਹੈ, ਸਾਨੂੰ ਉਪਭੋਗਤਾ ਨੂੰ ਇੱਕ ਕਮਰੇ ਨਾਲ ਜੋੜਨ ਅਤੇ ਨਵੇਂ ਸੰਦੇਸ਼ਾਂ ਦੇ ਗਾਹਕ ਬਣਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ. ਸਾਨੂੰ ਉਨ੍ਹਾਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਜੋ ਕਮਰੇ ਵਿੱਚ ਮੌਜੂਦ ਹਨ ਅਤੇ ਉਨ੍ਹਾਂ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ (online ਨਲਾਈਨ ਜਾਂ offline ਫਲਾਈਨ).
ਆਓ | _+_ | ਨੂੰ ਸੋਧਦੇ ਹਾਂ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ ਫਾਈਲ:
.envਅਸੀਂ ਇੱਥੇ ਤਿੰਨ ਨਵੇਂ ਬਲਾਕ ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ. | | _+_ | ਸੈਕਸ਼ਨ ਕਮਰੇ ਦੇ ਸਾਰੇ ਮੌਜੂਦਾ ਮੈਂਬਰਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਉਹ onlineਨਲਾਈਨ ਹਨ ਜਾਂ ਨਹੀਂ, ਜਦੋਂ ਕਿ _ _+_ | ਵਰਤਮਾਨ ਕਮਰੇ ਦਾ ਨਾਮ ਜਾਂ ਇੱਕ ਆਮ ਗੱਲਬਾਤ ਸੰਦੇਸ਼ ਪ੍ਰਦਰਸ਼ਤ ਕਰਦਾ ਹੈ ਜੇ ਉਪਭੋਗਤਾ ਕਿਸੇ ਕਮਰੇ ਨਾਲ ਜੁੜਿਆ ਨਹੀਂ ਹੈ. ਅੰਤ ਵਿੱਚ, | _+_ | ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਕਮਰੇ ਲਈ ਸੰਦੇਸ਼ ਪ੍ਰਦਰਸ਼ਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ.
ਬਦਲੋ | _+_ | ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ:
ngਬਦਲੋ | _+_ | ਉਸ ਕਮਰੇ ਦੀ ਆਈਡੀ ਦੇ ਨਾਲ ਜੋ ਤੁਸੀਂ ਪਹਿਲਾਂ ਬਣਾਇਆ ਸੀ. ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ, ਇੱਕ ਵਾਰ ਜਦੋਂ ਸਾਡੇ ਉਪਭੋਗਤਾ ਨੂੰ ਸਾਡੀ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ | _+_ | ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਕਮਰੇ ਵਿੱਚ ਜੋੜਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ. ੰਗ.
ਵਿੱਚ | _+_ |, | _+_ | | ਵਰਤਮਾਨ ਉਪਭੋਗਤਾ ਨੂੰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਆਈਡੀ ਦੇ ਨਾਲ ਚੈਟ ਰੂਮ ਵਿੱਚ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਕਮਰੇ ਵਿੱਚ ਕੋਈ ਵੀ ਮੌਜੂਦਾ ਸੰਦੇਸ਼ ਤੁਹਾਡੇ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਨੰਬਰ ਦੇ ਅਧਾਰ ਤੇ ਪ੍ਰਦਰਸ਼ਤ ਕੀਤੇ ਜਾਣਗੇ | _+_ |. ਇੱਥੇ, ਕਮਰੇ ਵਿੱਚ ਸਭ ਤੋਂ ਤਾਜ਼ਾ 100 ਸੰਦੇਸ਼ ਦਿਖਾਏ ਜਾਣਗੇ.
| | _+_ | ਹੁੱਕ ਉਦੋਂ ਚਾਲੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਚੈਟ ਰੂਮ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਸੰਦੇਸ਼ ਭੇਜਿਆ ਜਾਂਦਾ ਹੈ. ਅਸੀਂ ਨਵੇਂ ਸੰਦੇਸ਼ ਨੂੰ | _+_ | ਨਾਲ ਜੋੜਦੇ ਹਾਂ ਐਰੇ ਤਾਂ ਜੋ ਨਵਾਂ ਸੁਨੇਹਾ ਚੈਟ ਵਿੰਡੋ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇ. ਇਸੇ ਤਰ੍ਹਾਂ, | _+_ | ਹੁੱਕ ਸਾਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਜਦੋਂ ਕਮਰੇ ਦਾ ਕੋਈ ਮੈਂਬਰ onlineਨਲਾਈਨ ਆਉਂਦਾ ਹੈ ਜਾਂ offlineਫਲਾਈਨ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋ ਅਸੀਂ ਸਾਈਡਬਾਰ ਤੇ ਉਪਭੋਗਤਾ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅਪਡੇਟ ਕਰ ਸਕੀਏ.
ਹੁਣ, ਜਦੋਂ ਤੁਸੀਂ ਚੈਟਕਿਟ ਨਾਲ ਜੁੜੋਗੇ, ਤਾਂ ਕਮਰੇ ਦਾ ਨਾਮ | _+_ | ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇਗਾ ਜਦੋਂ ਕਿ ਕਮਰੇ ਦੇ ਮੈਂਬਰਾਂ ਨੂੰ ਸਾਈਡਬਾਰ 'ਤੇ ਪ੍ਰਦਰਸ਼ਤ ਕੀਤਾ ਜਾਵੇਗਾ. ਤੁਸੀਂ ਦੂਜੇ ਉਪਯੋਗਕਰਤਾਵਾਂ ਨੂੰ ਉਸ ਤੋਂ ਇਲਾਵਾ ਜੋੜ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਪੰਨੇ ਨੂੰ ਤਾਜ਼ਾ ਕਰਕੇ ਅਤੇ ਵਿੱਚ ਨਵਾਂ ਉਪਭੋਗਤਾ ਨਾਮ ਦਾਖਲ ਕਰਕੇ ਬਣਾਇਆ ਹੈ ਚੈਟ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਫਾਰਮ.
ਕਿਉਂਕਿ ਅਜੇ ਤੱਕ ਕੋਈ ਨਵਾਂ ਸੁਨੇਹਾ ਨਹੀਂ ਭੇਜਿਆ ਗਿਆ ਹੈ, ਕੁਝ ਵੀ | _+_ | ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦਾ. ਚਲੋ ਐਪ ਨੂੰ ਸੁਨੇਹੇ ਭੇਜਣ ਦੀ ਯੋਗਤਾ ਜੋੜ ਕੇ ਇਸਨੂੰ ਬਦਲਦੇ ਹਾਂ.
ਸੁਨੇਹੇ ਭੇਜੇ ਜਾ ਰਹੇ ਹਨ
ਆਓ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪਹਿਲਾਂ | _+_ | ਵਿੱਚ ਇੱਕ ਸੰਦੇਸ਼ ਫਾਰਮ ਬਣਾ ਕੇ ਸੰਦੇਸ਼ ਭੇਜਣ ਦੀ ਆਗਿਆ ਦੇਈਏ:
cdਫਿਰ ਅਪਡੇਟ ਕਰੋ | _+_ | ਇਸ ਤਰ੍ਹਾਂ:
clientਜਦੋਂ | _+_ | ਜਮ੍ਹਾਂ ਕਰਾਇਆ ਗਿਆ ਹੈ, ਅਸੀਂ | _+_ | ਤੱਕ ਪਹੁੰਚ ਕਰਦੇ ਹਾਂ ਅਤੇ ਕਾਲ ਕਰੋ | _+_ | ਇਸ 'ਤੇ. ਇਹ ਚੈਟ ਰੂਮ ਨੂੰ ਸੰਦੇਸ਼ ਭੇਜਦਾ ਹੈ ਅਤੇ, | _+_ | ਦਾ ਧੰਨਵਾਦ ਹੁੱਕ, ਨਵੇਂ ਸੰਦੇਸ਼ ਤੁਰੰਤ ਸਕ੍ਰੀਨ ਤੇ ਪ੍ਰਦਰਸ਼ਤ ਹੁੰਦੇ ਹਨ.
ਸਾਰੇ com.android.support ਨੂੰ ਇੱਕੋ ਵਰਜਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ
ਨਵੇਂ ਕਮਰੇ ਬਣਾਉ
ਇਸ ਵੇਲੇ, ਅਸੀਂ ਸਿਰਫ ਇੱਕ ਕਮਰੇ ਤੱਕ ਸੀਮਤ ਹਾਂ ਜੋ ਸਾਡੇ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਬਣਾਇਆ ਗਿਆ ਸੀ. ਆਓ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਚੈਟ ਐਪ ਤੋਂ ਹੀ ਨਵੇਂ ਕਮਰੇ ਬਣਾਉਣਾ ਸੰਭਵ ਕਰੀਏ. ਤੁਸੀਂ ਜਨਤਕ ਅਤੇ ਨਿਜੀ ਦੋਵੇਂ ਕਮਰੇ ਬਣਾ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਹੇਠਾਂ ਦੇਖੋਗੇ.
ਸੋਧੋ | _+_ | ਇਸ ਤਰ੍ਹਾਂ:
lenet-5 pytorch
ng serve| | _+_ | ਸੈਕਸ਼ਨ ਉਨ੍ਹਾਂ ਕਮਰਿਆਂ ਦੀ ਸੂਚੀ ਪ੍ਰਦਰਸ਼ਤ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨਾਲ ਉਪਭੋਗਤਾ ਸੰਬੰਧਿਤ ਹੈ. ਜਨਤਕ ਕਮਰਿਆਂ ਨੂੰ ਕਮਰੇ ਦੇ ਨਾਮ ਦੇ ਸਾਹਮਣੇ ਗਲੋਬ ਇਮੋਜੀ () ਨਾਲ ਦਰਸਾਇਆ ਗਿਆ ਹੈ ਜਦੋਂ ਕਿ ਪ੍ਰਾਈਵੇਟ ਕਮਰਿਆਂ ਦੀ ਬਜਾਏ ਲਾਕ ਇਮੋਜੀ ਹਨ. ਇਸਦੇ ਅਧੀਨ, ਸਾਡੇ ਕੋਲ | _+_ | ਹੈ ਭਾਗ ਜੋ ਜਨਤਕ ਕਮਰੇ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਮੌਜੂਦਾ ਉਪਭੋਗਤਾ ਸ਼ਾਮਲ ਹੋ ਸਕਦਾ ਹੈ (ਪਰ ਅਜੇ ਤੱਕ ਇਸਦਾ ਮੈਂਬਰ ਨਹੀਂ ਹੈ). ਅੰਤ ਵਿੱਚ, ਸਾਡੇ ਕੋਲ ਸੱਜੀ ਬਾਹੀ ਦੇ ਹੇਠਾਂ ਇੱਕ ਫਾਰਮ ਹੈ ਜੋ ਮੌਜੂਦਾ ਉਪਭੋਗਤਾ ਨੂੰ ਇੱਕ ਨਵਾਂ ਕਮਰਾ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ.
ਅੱਗੇ, ਅਪਡੇਟ ਕਰੋ | _+_ | ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ:
client| | _+_ | ਵਿਧੀ ਮੌਜੂਦਾ ਉਪਭੋਗਤਾ ਲਈ ਸੱਜੇ ਪਾਸੇ (ਜੇ ਕੋਈ ਹੈ) ਲਈ ਸ਼ਾਮਲ ਹੋਣ ਯੋਗ ਕਮਰੇ ਪ੍ਰਦਰਸ਼ਤ ਕਰਦੀ ਹੈ, ਜਦੋਂ ਕਿ | _+_ | ਵਿਧੀ ਮੌਜੂਦਾ ਉਪਭੋਗਤਾ ਨੂੰ ਕਿਸੇ ਵੀ ਕਮਰੇ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ ਜੋ ਹੇਠਾਂ ਸੂਚੀਬੱਧ ਹੈ ਸ਼ਾਮਲ ਹੋਣ ਯੋਗ ਕਮਰੇ ਇੱਕ ਕਲਿਕ ਨਾਲ. | _+_ | ਦੂਜੇ ਪਾਸੇ, ਉਦੋਂ ਸੱਦਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਸੱਜੀ ਸਾਈਡਬਾਰ ਦੇ ਹੇਠਾਂ ਫਾਰਮ ਜਮ੍ਹਾਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ. ਇਹ ਸਾਡੀ ਚੈਟਕਿਟ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਕਮਰਾ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਮੌਜੂਦਾ ਉਪਭੋਗਤਾ ਨੂੰ ਆਪਣੇ ਆਪ ਹੀ ਕਮਰੇ ਵਿੱਚ ਜੋੜਦਾ ਹੈ.
ਇਸਨੂੰ ਅਜ਼ਮਾਓ. ਇੱਕ ਉਪਭੋਗਤਾ ਨੂੰ ਐਪ ਨਾਲ ਕਨੈਕਟ ਕਰੋ. ਸਿਰਫ ਇੱਕ ਕਮਰੇ ਦੇ ਅਧੀਨ ਸੂਚੀਬੱਧ ਕੀਤਾ ਜਾਵੇਗਾ ਕਮਰੇ , ਪਰ ਤੁਸੀਂ ਹੇਠਾਂ ਸੱਜੇ ਪਾਸੇ ਵਾਲੇ ਫਾਰਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੋਰ ਬਣਾ ਸਕਦੇ ਹੋ. ਹੇਠਾਂ ਦਿੱਤੇ ਸਕ੍ਰੀਨਸ਼ਾਟ ਵਿੱਚ ਦਿਖਾਏ ਅਨੁਸਾਰ ਕੁਝ ਜਨਤਕ ਅਤੇ ਪ੍ਰਾਈਵੇਟ ਕਮਰੇ ਬਣਾਉ. ਤੁਸੀਂ ਕਮਰੇ ਦੇ ਨਾਮ ਤੇ ਕਲਿਕ ਕਰਕੇ ਕਮਰਿਆਂ ਦੇ ਵਿੱਚ ਬਦਲ ਸਕੋਗੇ.
ਵਰਤਮਾਨ ਉਪਭੋਗਤਾ (ਮੇਰੇ ਮਾਮਲੇ ਵਿੱਚ ਪੀਟਰ) ਕੋਲ ਕੋਈ ਸ਼ਾਮਲ ਹੋਣ ਯੋਗ ਕਮਰੇ ਨਹੀਂ ਹਨ, ਕਿਉਂਕਿ ਉਹ ਪਹਿਲਾਂ ਹੀ ਉਨ੍ਹਾਂ ਸਾਰਿਆਂ ਨਾਲ ਸਬੰਧਤ ਹੈ. ਇੱਕ ਨਵੇਂ ਟੈਬ ਵਿੱਚ ਚੈਟ ਐਪ ਖੋਲ੍ਹੋ ਅਤੇ ਦੂਜੇ ਉਪਭੋਗਤਾ ਦੇ ਰੂਪ ਵਿੱਚ ਲੌਗਇਨ ਕਰੋ. ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਉਪਭੋਗਤਾ ਉਨ੍ਹਾਂ ਜਨਤਕ ਕਮਰਿਆਂ ਵਿੱਚੋਂ ਕਿਸੇ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋ ਸਕਦਾ ਹੈ ਜੋ ਪੀਟਰ ਨੇ ਉਨ੍ਹਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ 'ਤੇ ਕਲਿਕ ਕਰਕੇ ਬਣਾਏ ਹਨ.
ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਪ੍ਰਾਈਵੇਟ ਕਮਰੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ
ਪ੍ਰਾਈਵੇਟ ਕਮਰੇ ਹੇਠਾਂ ਸੂਚੀਬੱਧ ਨਹੀਂ ਹਨ ਸ਼ਾਮਲ ਹੋਣ ਯੋਗ ਕਮਰੇ ਜਿਸਦਾ ਅਰਥ ਹੈ ਕਿ ਸਿਰਫ ਕਮਰਿਆਂ ਦੇ ਮੌਜੂਦਾ ਮੈਂਬਰ ਹੀ ਉਨ੍ਹਾਂ ਨੂੰ ਵੇਖ ਸਕਦੇ ਹਨ. ਆਓ ਪ੍ਰਾਈਵੇਟ ਕਮਰਿਆਂ ਦੇ ਮੈਂਬਰਾਂ ਲਈ ਦੂਜੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਕਮਰਿਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਸੰਭਵ ਬਣਾ ਕੇ ਇਸ ਨੂੰ ਖਤਮ ਕਰੀਏ.
ਖੋਲ੍ਹੋ | _+_ | ਅਤੇ ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ ਬਦਲੋ:
client/src/app/app.component.htmlਫਿਰ ਅਪਡੇਟ ਕਰੋ | _+_ | ਇਸ ਤਰ੍ਹਾਂ:
ਹੇਠਾਂ ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਨਵਾਂ ਰੂਪ ਜੋੜਿਆ ਗਿਆ ਹੈ. ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਉਪਯੋਗਕਰਤਾ ਨਾਮ ਦਰਜ ਕਰੋ ਅਤੇ ਫਾਰਮ ਜਮ੍ਹਾਂ ਕਰੋ, ਉਪਭੋਗਤਾ ਨੂੰ ਕਮਰੇ ਵਿੱਚ ਜੋੜਿਆ ਜਾਵੇਗਾ ਅਤੇ ਕਮਰਾ ਉਪਭੋਗਤਾਵਾਂ ਦੇ ਅਧੀਨ ਪ੍ਰਦਰਸ਼ਤ ਕੀਤਾ ਜਾਵੇਗਾ. ਕਮਰੇ ਤੁਰੰਤ, ਤਾਂ ਜੋ ਉਹ ਕਮਰੇ ਨਾਲ ਜੁੜ ਸਕਣ ਅਤੇ ਗੱਲਬਾਤ ਵਿੱਚ ਹਿੱਸਾ ਲੈ ਸਕਣ.
ਲਪੇਟ
ਇਹ ਮੇਰੇ ਟਿorialਟੋਰਿਅਲ ਨੂੰ ਸਮਾਪਤ ਕਰਦਾ ਹੈ. ਇਸ ਲੇਖ ਵਿੱਚ, ਤੁਸੀਂ ਕੁਝ ਵੀ ਖਾਸ ਕਰਕੇ ਗੁੰਝਲਦਾਰ ਕੀਤੇ ਬਿਨਾਂ ਜਨਤਕ ਅਤੇ ਪ੍ਰਾਈਵੇਟ ਕਮਰਿਆਂ ਦੇ ਨਾਲ ਇੱਕ ਸੰਪੂਰਨ ਚੈਟ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈ ਹੈ ਕਿਉਂਕਿ ਚੈਟਕਿਟ ਸਾਡੇ ਲਈ ਸਾਰੀ ਭਾਰੀ ਲਿਫਟਿੰਗ ਕਰਦਾ ਹੈ.
ਤੁਸੀਂ ਚੈਟਕਿਟ ਦੇ ਹੋਰ ਵਿਸਤਾਰ ਨੂੰ ਵੇਖ ਕੇ ਹੋਰ ਚੀਜ਼ਾਂ ਦੀ ਜਾਂਚ ਕਰ ਸਕਦੇ ਹੋ ਦਸਤਾਵੇਜ਼ . ਇਸ ਵਿੱਚ ਸੰਪੂਰਨ ਸਰੋਤ ਕੋਡ ਨੂੰ ਫੜਨਾ ਨਾ ਭੁੱਲੋ GitHub ਰਿਪੋਜ਼ਟਰੀ .
ਅਸਲ ਵਿੱਚ ਅਯੂਲੁਵਾ ਈਸਾਯਾਹ ਦੁਆਰਾ ਪ੍ਰਕਾਸ਼ਤ ਕੀਤਾ ਗਿਆ https://pusher.com
#ਕੋਣੀ #ਵੈਬ-ਵਿਕਾਸ