با Socket.io و Node.js یک برنامه چت بلادرنگ بسازید [With Automated Testing]

ek3nk4r 2023-04-17

0 36 خواندن این مطلب 5 دقیقه زمان میبرد

با Socket.io و Node.js یک برنامه چت بلادرنگ بسازید [With Automated Testing]

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در این آموزش، بیایید نحوه استفاده از Socket.IO و Node.js و ایجاد یک برنامه چت ساده را بیاموزیم. ما یک برنامه اصلی Node.js را راه اندازی می کنیم و وابستگی های لازم را نصب می کنیم. با رابط چت اولیه و اضافه کردن یک ویژگی ساده که در آن کاربران به راحتی می توانند با کمک اتصال Socket.IO پیام ارسال و دریافت کنند. Socket.io یک کتابخانه پرکاربرد است که به ارتباط بلادرنگ بین سرویس گیرندگان وب و سرورها کمک می کند. در نهایت یک تست ساده با فریم ورک Mocha می نویسیم و از طریق Harness CI آن را خودکار می کنیم.

فهرست مطالب

پیش نیازها

آموزش

Node.js را روی دستگاه خود نصب کنید: می توانید آخرین نسخه Node.js را از وب سایت رسمی دانلود و نصب کنید: https://nodejs.org/
ایجاد یک پروژه جدید Node.js: یک پنجره ترمینال باز کنید و یک دایرکتوری جدید برای پروژه خود ایجاد کنید. به دایرکتوری جدید بروید و دستور زیر را برای ایجاد یک فایل package.json جدید برای پروژه خود اجرا کنید:

npm init -y

نصب Socket.io: دستور زیر را برای نصب Socket.io در پروژه خود اجرا کنید:

npm install socket.io

ایجاد یک سرور جدید Node.js: یک فایل جدید با نام ایجاد کنید server.js در پوشه پروژه خود و کد زیر را اضافه کنید:

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.use(express.static(__dirname + '/public'));

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });

  socket.on('message', (message) => {
    console.log('Received message:', message);
    io.emit('message', message);
  });
});

http.listen(3001, () => {
  console.log('Server started on port 3001');
});

این کد یک شنونده رویداد برای رویداد پیام اضافه می کند که وقتی کاربر روی دکمه ارسال کلیک می کند توسط مشتری منتشر می شود. سرور پیام را در کنسول ثبت می کند و سپس یک رویداد پیام را با استفاده از متد io.emit () برای همه مشتریان متصل ارسال می کند.

ایجاد یک فایل HTML جدید: یک فایل جدید با نام ایجاد کنید index.html در پوشه عمومی و کد زیر را اضافه کنید. یک فیلد ورودی و یک دکمه به فایل index.html اضافه می کند تا به کاربران امکان ارسال پیام به سرور را بدهد. در اینجا یک مثال است:

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Tutorial</title>
  </head>
  <body>
    <h1>Socket.io Tutorial</h1>
    <div id="messages"></div>
    <input id="message-input" type="text" placeholder="Type your message here">
    <button id="send-button">Send</button>
    <script src="https://dev.to/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      socket.on('connect', () => {
        console.log('Connected to server');
      });
      socket.on('disconnect', () => {
        console.log('Disconnected from server');
      });
      const messages = document.getElementById('messages');
      const messageInput = document.getElementById('message-input');
      const sendButton = document.getElementById('send-button');
      sendButton.addEventListener('click', () => {
        const message = messageInput.value;
        socket.emit('message', message);
        messageInput.value="";
      });
      socket.on('message', (message) => {
        const messageElement = document.createElement('div');
        messageElement.innerText = message;
        messages.appendChild(messageElement);
      });
    </script>
  </body>
</html>

راه اندازی سرور: دستور زیر را در ترمینال خود اجرا کنید تا سرور راه اندازی شود:

node server.js

شما باید خروجی ترمینال خود را در زیر ببینید،
Server started on port 3001

و هنگامی که 3001 را در محلی خود باز می کنید، باید برنامه چت خود را در حال اجرا ببینید.
برنامه سوکت در حال اجرا

این باید ساختار پوشه برنامه شما از هم اکنون باشد.

یک مورد آزمایشی به برنامه چت اضافه کنید

از آنجایی که Socket.io یک چارچوب بلادرنگ است، نوشتن تست های خودکار برای آن می تواند کمی چالش برانگیز باشد. با این حال، ما می‌توانیم یک آزمایش ساده بنویسیم تا بررسی کنیم که کلاینت و سرور می‌توانند با یکدیگر ارتباط برقرار کنند و پیام‌ها را ارسال/دریافت کنند.

با اجرای دستور زیر، چارچوب تست موکا و کتابخانه ادعای chai را نصب کنید:

npm install mocha chai --save-dev

[Note: Run the above command in the root of your app]

یک پوشه جدید به نام بسازید test و یک فایل به نام اضافه کنید test.js در آن با کد زیر

const assert = require('chai').assert;
const io = require('socket.io-client');
const serverUrl="http://localhost:3000";

describe('Socket.io test', function() {
  let client1, client2;

  before(function(done) {
    // Connect to the server
    client1 = io.connect(serverUrl);
    client2 = io.connect(serverUrl);
    done();
  });

  after(function(done) {
    // Disconnect from the server
    client1.disconnect();
    client2.disconnect();
    done();
  });

  it('Should be able to send and receive messages', function(done) {
    client1.emit('message', 'Hello, world!');
    client2.on('message', function(msg) {
      assert.equal(msg, 'Hello, world!');
      done();
    });
  });
});

اکنون مطمئن شوید که برنامه شما در حال اجرا است.

در ترمینال دیگری برنامه را باز کنید و دستور زیر را برای تست برنامه اجرا کنید.

npm test

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

کد برنامه خود را به یک سیستم مدیریت کنترل منبع مانند GitHub فشار دهید.

کد برنامه من اینجاست – چت-برنامه-آموزش

می‌توانید آن را فورک کنید یا از خودتان (آزمایشی که به GitHub خود فشار داده‌اید) استفاده کنید تا تست‌های خودکار را با استفاده از ابزار CI تنظیم کنید. ما قصد داریم این آموزش را گسترش دهیم تا به شما نشان دهیم چگونه می توانید تست ها را خودکار کنید.

تست ها را با استفاده از ابزار CI به صورت خودکار انجام دهید

در اینجا، ما از سریعترین ابزار CI، Harness استفاده خواهیم کرد.

به ماژول رایگان Harness CI خود وارد شوید.

با ایجاد اولین خط لوله خود شروع کنید
خط لوله اول

با حساب GitHub خود احراز هویت کنید زیرا کد برنامه شما در آنجا موجود است.
github را اضافه کنید

با GitHub احراز هویت

مخزن برنامه خود را انتخاب کنید.
مخزن گره

بعد، پیکربندی خط لوله را شروع کنید.

Node.js را از لیست انتخاب کنید زیرا برنامه ما در Node.js نوشته شده است. چیزی که سپس خواهید دید یک پیکربندی پیش فرض yaml برای برنامه Node.js شما است.
یامل پیش فرض

ادامه دهید و روی دکمه “ایجاد خط لوله” کلیک کنید. شما داشبورد خط لوله را خواهید داشت.
ایجاد گره

روی مرحله “Build Node App” کلیک کنید، باید مرحله اجرا را مشاهده کنید که به طور پیش فرض با تنظیمات اولیه اضافه شده است.
مرحله nodeapp

روی مرحله “Build Node App” کلیک کنید، که در حال اجرا است و تنظیمات پیش فرض را مشاهده خواهید کرد.

ما می خواهیم برنامه قبل از آزمایش آن اجرا شود. چگونه برنامه را اجرا کنیم؟ برای اجرای سرور یک مرحله پس زمینه اضافه می کنیم.

مرحله Background را با دستورات زیر پیکربندی کنید.

npm install
npm install express --save-dev
node server.js

اسکرین شات همان مرحله در زیر نشان داده شده است
گام با دستورات

تغییرات را اعمال کنید و مرحله دیگری را برای آزمایش برنامه اضافه کنید.
نرم افزار را تست کنید

مرحله Run را از کتابخانه step انتخاب کنید.
مرحله اجرا اضافه شد

دستورات زیر را به مرحله اجرا اضافه کنید.

npm install
npm test

با اضافه شدن دستورات می توانید اسکرین شات مرحله اجرا را ببینید.
دستورات مرحله اجرا اضافه شد

تغییرات را اعمال کنید و خط لوله را ذخیره کنید.

در این مرحله، خط لوله شما باید به این شکل باشد.
به نظر می رسد خط لوله

همه چیز را ذخیره کنید و خط لوله را اجرا کنید.
اجرای خط لوله

شما باید اجرای موفقیت آمیز خط لوله را با گذراندن آزمایش مشاهده کنید.
خط لوله موفق

شما ماشه های کشش و فشار را قبلاً به طور پیش فرض فعال کرده اید.
باعث می شود

بنابراین وقتی هر توسعه‌دهنده‌ای کد را به شاخه اصلی شما فشار می‌دهد، خط لوله فعال می‌شود و آزمایش را اجرا می‌کند. به این ترتیب تست ها به راحتی خودکار می شوند.

اگر دوست دارید CI/CD را از ابتدا یاد بگیرید، من یک آموزش دیگر دارم که ممکن است دوست داشته باشید. نگاهی بیاندازید.

ek3nk4r 2023-04-17

0 36 خواندن این مطلب 5 دقیقه زمان میبرد