آموزش اتصال ری اکت با وب سوکت و فرخوانی API  در  Socket.io  . React js

سلام عرض و ادب ، قبل از همه چیز این اموزش بعد از کلی گشت و گذار در مورد نحوه استفاده وب سوکت و ری اکت و اینکه درخواست های من به سمت API تویه تب شبکه مروگر نشون نده و کلی جستجو ، بالاخره تونستم بفهمم چیه و اینجا به اشتراک میذارم دلیل اشتراک گذاری این موضوع هم بخاطر اینکه خیلیا اصلا توضیح ندادن خیلیا تفمال توضیح دادن ، خیلیا توضیح دادن ولی سورس برنامه رو نذاشتن ، فقط ی توضیح سرسری داده و توقع داشته ماها درک کنیم.مطالبی که میخام توضیح بدم به شرح زیر است :ایجاد سرور , کلاینت وب سوکتارتباط ری اکت با وب سوکت فراخوانی API داخل وب سوکتیکی از دغدغه های من این بود که اقا من دوست ندارم کسی بفهمه API من چیه ، تویه سایتم ، قشنگ با یک incpect(بازرسی) از مرورگر گرفتن ،قشنگ مشخص میشد که داده به کجا داره ارسال میشه . و همیشه دنبال این بودم یک چیزی پیدا کنم که نشون نده ، که وب سوکت بود و تو این ویدیو آموزشی توضیح کامل میدم.* خدایش من خیلی دلم پره ، واسه همین اینو گذاشتم که بقیه اذیت نشن مثل من.انشالله که ویدیو جواب بده براتون و سوالی چیز میزی بود بفرمایید.ویدیو اول + سورس برنامه ( آموزش وب سوکت + ایجاد سرور و کلاینت )لینک آموزش ویدیو در آپارات :https://aparat.com/v/JsufUدستور نصب وب سوکت : npm i websocketسورس Server.js#!/usr/bin/env nodevar WebSocketServer = require('websocket').server;var http = require('http');var server = http.createServer(function(request, response) {console.log((new Date()) + ' Received request for ' + request.url);response.writeHead(404);response.end();});server.listen(5050, function() {console.log((new Date()) + ' Server is listening on port 5050');});wsServer = new WebSocketServer({httpServer: server,// You should not use autoAcceptConnections for production// applications, as it defeats all standard cross-origin protection// facilities built into the protocol and the browser. You should// *always* verify the connection's origin and decide whether or not// to accept it.autoAcceptConnections: false});function originIsAllowed(origin) {// put logic here to detect whether the specified origin is allowed.return true;}wsServer.on('request', function(request) {if (!originIsAllowed(request.origin)) {// Make sure we only accept requests from an allowed originrequest.reject();console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');return;}var connection = request.accept('echo-protocol', request.origin);console.log((new Date()) + ' Connection accepted.');connection.on('message', function(message) {if (message.type === 'utf8') {console.log("Get Message From Client :"+message.utf8Data)connection.sendUTF("Daryaft Shod Soltan !");}});connection.on('close', function(reasonCode, description) {console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');});});سورس Client.js#!/usr/bin/env nodevar WebSocketClient = require('websocket').client;var client = new WebSocketClient();client.on('connectFailed', function(error) {console.log('Connect Error: ' + error.toString());});client.on('connect', function(connection) {console.log('WebSocket Client Connected');connection.on('error', function(error) {console.log("Connection Error: " + error.toString());});connection.on('close', function() {console.log('echo-protocol Connection Closed');});/// DARYAFT Query From Server to Clientconnection.on('message', function(message) {if (message.type === 'utf8') {console.log("Received Message From Server : '" + message.utf8Data + "'");}});// SEND FROM CLIENT TO SERVERfunction sendNumber() {if (connection.connected) {var number = Math.round(Math.random() * 0xFFFFFF);connection.sendUTF(number.toString());setTimeout(sendNumber, 1000);}}sendNumber();});client.connect('ws://localhost:5050/', 'echo-protocol');* ویدیو دوم + سورس برنامه ( آموزش ارتباط ری اکت با وب سوکت)لینک آموزش ویدیو دوم در آپارات :https://aparat.com/v/c1084دستور نصب وب سوکت روی ری اکتnpm i websocketسورس App.js import React, { useState } from "react";function App() {//give an initial state so that the data won't be undefined at startconst [bids, setBids] = useState([0]);const ws = new WebSocket("ws://localhost:5050/","echo-protocol");const apiCall = {message: "live/signal"};ws.onopen = (event) => {ws.send(JSON.stringify(apiCall));};ws. = function (event) {// const json = JSON.parse(event.data);console.log(event.data);try {} catch (err) {console.log(err);}};}export default App;* ویدیو سوم + سورس برنامه ( فراخوانی API داخل وب سوکت با ری اکت )نکته ( تو ویدیو بجای npm i axios گفتم ، node i axios ، پیشاپیش ببخشید.)لینک آموزش ویدیو سوم در آپارات :https://aparat.com/v/h4yfiنصب Axios npm i axiosسورس Server.js#!/usr/bin/env nodevar WebSocketServer = require('websocket').server;var http = require('http');var axios = require('axios');var server = http.createServer(function(request, response) { console.log((new Date()) + ' Received request for ' + request.url); response.writeHead(404); response.end();});server.listen(5050, function() { console.log((new Date()) + ' Server is listening on port 5050');});wsServer = new WebSocketServer({ httpServer: server, // You should not use autoAcceptConnections for production // applications, as it defeats all standard cross-origin protection // facilities built into the protocol and the browser. You should // *always* verify the connection's origin and decide whether or not // to accept it. autoAcceptConnections: false});function originIsAllowed(origin) { // put logic here to detect whether the specified origin is allowed. return true;}wsServer.on('request', function(request) { if (!originIsAllowed(request.origin)) { // Make sure we only accept requests from an allowed origin request.reject(); console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.'); return; } var connection = request.accept('echo-protocol', request.origin); console.log((new Date()) + ' Connection accepted.'); connection.on('message', function(message) { if (message.type === 'utf8') { var message = JSON.parse(message.utf8Data); console.log("Daryaft Shod !"); axios.all([ axios.get('http://localhost:8000/api/'+message['message']) ]).then(axios.spread((response) => { connection.sendUTF(response.data.data.message); })).catch(error => { connection.sendUTF(error); }); } }); connection.on('close', function(reasonCode, description) { console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); });});خب امیدوارم که سه ویدیو آموزشی که براتون گذاشتم صفر تا صد رو توضیح دادم ، بدردتون خورده باشهسوالی چیزی بود بگید در خدمتتون هستم . موفق باشید