سلام عرض و ادب ، قبل از همه چیز این اموزش بعد از کلی گشت و گذار در مورد نحوه استفاده وب سوکت و ری اکت و اینکه درخواست های من به سمت API تویه تب شبکه مروگر نشون نده و کلی جستجو ، بالاخره تونستم بفهمم چیه و اینجا به اشتراک میذارم
دلیل اشتراک گذاری این موضوع هم بخاطر اینکه خیلیا اصلا توضیح ندادن خیلیا تفمال توضیح دادن ، خیلیا توضیح دادن ولی سورس برنامه رو نذاشتن ، فقط ی توضیح سرسری داده و توقع داشته ماها درک کنیم.
مطالبی که میخام توضیح بدم به شرح زیر است :
ایجاد سرور , کلاینت وب سوکت
ارتباط ری اکت با وب سوکت
فراخوانی API داخل وب سوکت
* خدایش من خیلی دلم پره ، واسه همین اینو گذاشتم که بقیه اذیت نشن مثل من.
انشالله که ویدیو جواب بده براتون و سوالی چیز میزی بود بفرمایید.
https://aparat.com/v/JsufU
npm i websocket#!/usr/bin/env node
var 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 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') {
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 node
var 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 Client
connection.on('message', function(message) {
if (message.type === 'utf8') {
console.log("Received Message From Server : '" + message.utf8Data + "'");
}
});
// SEND FROM CLIENT TO SERVER
function 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 start
const [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 node
var 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.');
});
});
خب امیدوارم که سه ویدیو آموزشی که براتون گذاشتم صفر تا صد رو توضیح دادم ، بدردتون خورده باشه
سوالی چیزی بود بگید در خدمتتون هستم . موفق باشید
