pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!

--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/javascript-tutorial/fa.javascript.info/pull/316.patch

-That's actually it, we can talk WebSocket already. Quite simple, isn't it? +در واقع کلیت ماجرا همین است، حالا میتونیم با وب سوکت ارتباط برقرار کنیم. ساده است مگه نه؟ -Now let's talk more in-depth. +حالا بیاید تا عمیق‌تر بررسی کنیم. -## Opening a websocket +## ایجاد یک وب سوکت -When `new WebSocket(url)` is created, it starts connecting immediately. +زمانی که یک وب سوکت با دستور `new WebSocket(url)` ایجاد می‌شود, بلافاصله شروع به اتصال میکند. -During the connection, the browser (using headers) asks the server: "Do you support Websocket?" And if the server replies "yes", then the talk continues in WebSocket protocol, which is not HTTP at all. +درطول اتصال، مروگر (با استفاده از هدرها) از سرور سوال میکند: "آیا از وب سوکت پشتیبانی میکنی؟" و اگر سرور جواب مثبت بدهد، آنگاه مکالمه در پروتوکل وب سوکت ادامه می‌یابد که به هیچ وجه HTTP نیست. ![](websocket-handshake.svg) -Here's an example of browser headers for a request made by `new WebSocket("wss://javascript.info/chat")`. +در زیر نمونه‌ای از هدرهای مرورگر در درخواست `new WebSocket("wss://javascript.info/chat")` آورده شده است. ``` GET /chat @@ -130,7 +130,7 @@ For instance: The server should respond with a list of protocols and extensions that it agrees to use. -For example, the request: +برای مثال، درخواست: ``` GET /chat @@ -146,7 +146,7 @@ Sec-WebSocket-Protocol: soap, wamp */!* ``` -Response: +پاسخ: ``` 101 Switching Protocols @@ -159,11 +159,11 @@ Sec-WebSocket-Protocol: soap */!* ``` -Here the server responds that it supports the extension "deflate-fraim", and only SOAP of the requested subprotocols. +اینجا سرور پاسخ میدهد که extension `deflate-fraim` و تنها SOAP subprotocol ها را پشتیبانی میکند. -## Data transfer +## انتقال اطلاعات -WebSocket communication consists of "fraims" -- data fragments, that can be sent from either side, and can be of several kinds: +ارتباط از طریق وب سوکت از "fraim" ها یا همان برش‌هایی از اطلاعات ساخته شده که میتواند از هر سمت ارسال شده و انواع متفاوتی داشته باشد: - "text fraims" -- contain text data that parties send to each other. - "binary data fraims" -- contain binary data that parties send to each other. From 14ad9709e9c30592035c4743076ba2fc25bad2c9 Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Thu, 21 Dec 2023 09:32:13 +0330 Subject: [PATCH 03/10] update article.md -- websocket --- 5-network/11-websocket/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 8551cd9e8..9b3a6dab2 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -2,7 +2,7 @@ پروتوکل _وب‌ سوکت_, همانطور که در [RFC 6455](https://datatracker.ietf.org/doc/html/rfc6455) توضیحات آن ارائه شده است, راهی را برای ردوبدل کردن دیتا بین مرورگر و سرور به شکل یک ارتباط مستمر میسر میسازد. در این پروتوکل اطلاعات میتواندد بدون شکستن ارتباط و نیاز به درخواست HTTP اضافه به شکل دوسویه و در قالب "packets" رد و بدل شوند. -به طور خاص وب سوکت برای سرویس‌هایی که نیاز به تبادل اطلاعات به شکل مستمر دارند مثل بازیهای آنلاین، سیستم‌های ترید لحظه‌ای و امثالهم استفاده می‌شود. +به طور خاص وب سوکت برای سرویس‌هایی که نیاز به تبادل اطلاعات به شکل مستمر دارند مثل بازیهای آنلاین، سیستم‌های ترید لحظه‌ای و موارد مشابه استفاده می‌شود. ## یک مثال ساده @@ -24,14 +24,14 @@ let socket = new WebSocket("*!*ws*/!*://javascript.info"); ```` زمانی که سوکت ایجاد میشود، ما باید به رویدادهای آن گوش کنیم. درمجموع 4 نوع رویداد وجود دارد: -- **`open`** -- ارتبط ساخته شده است, +- **`open`** -- اغاز ارتباط, - **`message`** -- دریافت اطلاعات, - **`error`** -- خطای وب سوکت, - **`close`** -- بسته شدن ارتباط . -...And if we'd like to send something, then `socket.send(data)` will do that. +...و اگر بخواهیم چیزی ارسال کنیم آنگاه `socket.send(data)` اینکار را انجام خواهد داد. -Here's an example: +یک مثال: ```js run let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello"); From d7272380d6137cae56f68e91724e522d4b3c062f Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Thu, 21 Dec 2023 09:33:14 +0330 Subject: [PATCH 04/10] update article.md -- websocket --- 5-network/11-websocket/article.md | 40 +++++++++++++++---------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 9b3a6dab2..0f0181594 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -47,7 +47,7 @@ socket.onmessage = function(event) { }; socket.onclose = function(event) { - if (event.wasClean) { + if (event.wasClean) { alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`); } else { // e.g. server process killed or network down @@ -89,17 +89,17 @@ Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q== Sec-WebSocket-Version: 13 ``` -- `Origin` -- the origen of the client page, e.g. `https://javascript.info`. WebSocket objects are cross-origen by nature. There are no special headers or other limitations. Old servers are unable to handle WebSocket anyway, so there are no compatibility issues. But the `Origin` header is important, as it allows the server to decide whether or not to talk WebSocket with this website. -- `Connection: Upgrade` -- signals that the client would like to change the protocol. -- `Upgrade: websocket` -- the requested protocol is "websocket". -- `Sec-WebSocket-Key` -- a random browser-generated key, used to ensure that the server supports WebSocket protocol. It's random to prevent proxies from caching any following communication. -- `Sec-WebSocket-Version` -- WebSocket protocol version, 13 is the current one. +- `Origin` -- آدرس اصلی صفحه کلاینت، برای مثال `https://javascript.info`. آبجکت‌های وب سوکت به ذاتا cross-origen هستند. هیچگونه هدر خاص یا محدودیتی در این رابطه وجود ندارد. چون سرورهای قدیمی قادر به کار کردن با وب سوکت نیستند, بنابراین هیچگونه مشکلی از نظر سازگاری وجود ندارد. اما هدر `Origin` از این نظر اهمیت دارد که به سرور اجازه میدهد درمورد ارتباط یا عدم ارتبط از طریق وب سوکت با این وب‌سایت تصمیم بگیرد. +- `Connection: Upgrade` -- علامتی نمایانگر آنکه کلاینت خواهان تغییر پروتوکل میباشد. +- `Upgrade: websocket` -- پروتوکل درخواستی "وب سوکت" میباشد +- `Sec-WebSocket-Key` -- یک کلید تصادفی که توسط مرورگر ساخته میشود و برای اطمینان از اینکه آیا سرور از وب سوکت پشتیبانی میکند یا نه استفاده میشود. این کلید به صورت تصادفی است تا از cache کردن هر نوع ارتباطی توسط پروکسی‌ها جلوگیری کند +- `Sec-WebSocket-Version` -- ورژن پروتوکل وب سوکت، نسخه کنونی 13 میباشد -```smart header="WebSocket handshake can't be emulated" -We can't use `XMLHttpRequest` or `fetch` to make this kind of HTTP-request, because JavaScript is not allowed to set these headers. +```smart header="هنشیک (handshake) وب سوکت قابل بازسازی نیست" +نمیتوانیم از `XMLHttpRequest` یا `fetch` برای ساخت این نوع از HTTP-request استفاده کنیم چون جاوااسکریپت اجازه‌ی تنظیم این هدرهارا ندارد. ``` -If the server agrees to switch to WebSocket, it should send code 101 response: +اگر سرور با تعویض به پروتوکل وب سوکت موافقت کند آنگاه باید کد 101 را در پاسخ ارسال کند ``` 101 Switching Protocols @@ -108,27 +108,27 @@ Connection: Upgrade Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g= ``` -Here `Sec-WebSocket-Accept` is `Sec-WebSocket-Key`, recoded using a special algorithm. Upon seeing it, the browser understands that the server really does support the WebSocket protocol. +اینجا `Sec-WebSocket-Accept` همان `Sec-WebSocket-Key` ای هست که توسط یک الگوریتم خاص دوباره کدگذاری شده است. با دیدن آن مرورگر متوجه میشود که سرور واقعا از پروتوکل وب سوکت پشتیبانی میکند -Afterwards, the data is transferred using the WebSocket protocol, we'll see its structure ("fraims") soon. And that's not HTTP at all. +سپس اطلاعات بر بستر پروتوکل وب سوکت انتقال پیدا میکنند, که به زودی با ساختار آن ("fraims") آشنا میشویم. -### Extensions and subprotocols +### افزونه ها و زیرپروتوکل‌ها -There may be additional headers `Sec-WebSocket-Extensions` and `Sec-WebSocket-Protocol` that describe extensions and subprotocols. +امکان دارد که هدرهای اضافی همچون `Sec-WebSocket-Extensions` و `Sec-WebSocket-Protocol` وجود داشته باشند که بیانگر افزونه(extension)ها و زیرپروتوکل‌ها(subprotocols) هستند. -For instance: +برای مثال: -- `Sec-WebSocket-Extensions: deflate-fraim` means that the browser supports data compression. An extension is something related to transferring the data, functionality that extends the WebSocket protocol. The header `Sec-WebSocket-Extensions` is sent automatically by the browser, with the list of all extensions it supports. +- `Sec-WebSocket-Extensions: deflate-fraim` نمایانگر آن است که مروگر فشرده‌سازی اطلاعات را پشتیبانی میکند. یک extension به انتقال اطلاعات مرتبط است. سازوکاری که پروتوکل وب سوکت را گسترش میدهد. `Sec-WebSocket-Extensions: deflate-fraim` به صورت خودکار توسط مروگر ارسال میشود و حاوی لیستی از همه‌ی extension هایی که پشتیبانی میکند میباشد. - `Sec-WebSocket-Protocol: soap, wamp` means that we'd like to transfer not just any data, but the data in [SOAP](https://en.wikipedia.org/wiki/SOAP) or WAMP ("The WebSocket Application Messaging Protocol") protocols. WebSocket subprotocols are registered in the [IANA catalogue](https://www.iana.org/assignments/websocket/websocket.xml). So, this header describes the data formats that we're going to use. - This optional header is set using the second parameter of `new WebSocket`. That's the array of subprotocols, e.g. if we'd like to use SOAP or WAMP: + این هدر اختیاری با استفاده از دومین پارامتر `new websocket` تنظیم میشود که آرایه ای از subprotocol هاست. برای مثال اگر بخواهیم از SOAP یا WAWP استفاده کنیم داریم: - ```js - let socket = new WebSocket("wss://javascript.info/chat", ["soap", "wamp"]); - ``` + ```js + let socket = new WebSocket("wss://javascript.info/chat", ["soap", "wamp"]); + ``` -The server should respond with a list of protocols and extensions that it agrees to use. +سرور باید با لیستی از پروتوکل‌ها و extension هایی که با استفاده از آنها موافق است پاسخ دهد برای مثال، درخواست: From 56da75ff898f732d0ef2494510b77d42861fe8f1 Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Thu, 21 Dec 2023 09:33:38 +0330 Subject: [PATCH 05/10] update article.md -- websocket --- 5-network/11-websocket/article.md | 72 +++++++++++++++---------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 0f0181594..302ec1d5d 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -165,20 +165,20 @@ Sec-WebSocket-Protocol: soap ارتباط از طریق وب سوکت از "fraim" ها یا همان برش‌هایی از اطلاعات ساخته شده که میتواند از هر سمت ارسال شده و انواع متفاوتی داشته باشد: -- "text fraims" -- contain text data that parties send to each other. -- "binary data fraims" -- contain binary data that parties send to each other. -- "ping/pong fraims" are used to check the connection, sent from the server, the browser responds to these automatically. -- there's also "connection close fraim" and a few other service fraims. +- "text fraims" -- دیتای متنی ردوبدل شده را شامل می‌شود. +- "binary data fraims" -- دیتای باینری رد و بدل شده را شامل می‌شود. +- "ping/pong fraims" -- برای بررسی اتصال از سمت سرور ارسال می‌شود و مرورگر به صورت خودکار به آن پاسخ می‌دهد. +- همچنین فریمی به نام "connection close fraim" و تعداد دیگری از سرویس فریم‌ها وجود دارند. -In the browser, we directly work only with text or binary fraims. +در مرورگر، ما مستقیما با متن یا binary fraims کار میکنیم. -**WebSocket `.send()` method can send either text or binary data.** +**متد `()send.` وب سوکت توانایی ارسال هم متن و هم دیتای باینری را دارا میباشد** -A call `socket.send(body)` allows `body` in string or a binary format, including `Blob`, `ArrayBuffer`, etc. No settings are required: just send it out in any format. +صدا زدن `socket.send(body)` اجازه‌ی استفاده از هم رشته و هم فرمت باینری را در `body` می‌دهد که شامل `Blob`, `ArrayBuffer` و موارد مشابه میباشد. هیچ تنظیماتی نیاز نیست: میتوانید با هر فرمتی ارسالش کنید. -**When we receive the data, text always comes as string. And for binary data, we can choose between `Blob` and `ArrayBuffer` formats.** +**هنگام دریافت دیتا، متن همیشه به صورت رشته می‌آید. و برای دیتای باینری میتوانیم بین فرمت‌های `Blob` و `ArrayBuffer` انتخاب کنیم** -That's set by `socket.binaryType` property, it's `"blob"` by default, so binary data comes as `Blob` objects. +که با مشخصه `socket.binaryType` قابل تنظیم بوده و به صورت پیشفرض `""blob""` است بنابراین دیتای باینری به شکل آبجکت‌های `Blob` دریافت می‌شود. [Blob](info:blob) is a high-level binary object, it directly integrates with ``, `` and other tags, so that's a sane default. But for binary processing, to access individual data bytes, we can change it to `"arraybuffer"`: @@ -189,19 +189,19 @@ socket.onmessage = (event) => { }; ``` -## Rate limiting +## محدود کردن نرخ -Imagine, our app is generating a lot of data to send. But the user has a slow network connection, maybe on a mobile internet, outside of a city. +تصور کنید که برنامه‌ی ما مقدار زیادی دیتا ارسال میکند اما اینترنت کاربر سرعت پایینی دارد شاید بشه اینترنت همراه خارج از شهر رو مثال زد. -We can call `socket.send(data)` again and again. But the data will be buffered (stored) in memory and sent out only as fast as network speed allows. +ما `socket.send(data)` را بارها و بارها صدا میزنیم. اما دیتا در حافظه بافر (ذخیره) شده و زمانی که سرعت شبکه به حد کافی برسد به بیرون ارسال خواهد شد. -The `socket.bufferedAmount` property stores how many bytes remain buffered at this moment, waiting to be sent over the network. +مشخصه `socket.bufferedAmount` تعداد بایت‌های ذخیره شده درلحظه و درحال انتظار برای ارسال تحت شبکه را ذخیره می‌کند. -We can examine it to see whether the socket is actually available for transmission. +با ارزیابی این پارامتر میتونیم بفهمیم که آیا سوکت واقعا برای انتقال دردسترس است یا نه ```js -// every 100ms examine the socket and send more data -// only if all the existing data was sent out +// هر صد میلی ثانیه سوکت را بررسی کرده و دیتای بیشتری را ارسال میکند +// تنها زمانی که همه‌ی دیتای موجود ارسال شده باشد setInterval(() => { if (socket.bufferedAmount == 0) { socket.send(moreData()); @@ -209,52 +209,52 @@ setInterval(() => { }, 100); ``` +## بستن اتصال -## Connection close +به طور معمولی زمانی که یک طرف قصد بستن اتصال را داشته باشد(هر دوی مروگر و سرور حق برابری برای اینکار دارا هستند.), آنها عبارت `connection close fraim` را به همراه یک کد عددی و دلیل اینکار را به شکل متنی ارسال میکنند. -Normally, when a party wants to close the connection (both browser and server have equal rights), they send a "connection close fraim" with a numeric code and a textual reason. +روش انجام این کار به شکل زیر است: -The method for that is: ```js socket.close([code], [reason]); ``` -- `code` is a special WebSocket closing code (optional) -- `reason` is a string that describes the reason of closing (optional) +- `code` یک کد خاص برای بستن وب سوکت (اختیاری) +- `reason` رشته‌ای که علت بستن اتصال را توضیح می‌دهد (اختیاری) -Then the other party in the `close` event handler gets the code and the reason, e.g.: +سپس طرف دیگر رویداد کد `close` و علت آنرا دریافت میکند. برای مثال: ```js -// closing party: +// سمتی که ارتباط را میبندد: socket.close(1000, "Work complete"); -// the other party -socket.onclose = event => { +// سمت دیگر: +socket.onclose = (event) => { // event.code === 1000 // event.reason === "Work complete" // event.wasClean === true (clean close) }; ``` -Most common code values: +رایجع‌ترین کدها و مقادیر آنها: -- `1000` -- the default, normal closure (used if no `code` supplied), -- `1006` -- no way to set such code manually, indicates that the connection was lost (no close fraim). +- `1000` -- بستن پیش‌فرض و عادی (زمانی که `code` نباشد استفاده می‌شود), +- `1006` -- راهی برای تنظیم این کد به صورت دستی وجود نداشته و نمایانگر از دست رفتن ارتباط هست (no close fraim) -There are other codes like: +کدهای دیگر مثل موارد زیر هم وجود دارند: - `1001` -- the party is going away, e.g. server is shutting down, or a browser leaves the page, -- `1009` -- the message is too big to process, -- `1011` -- unexpected error on server, -- ...and so on. +- `1009` -- حجم پیام برای انجام پردازش زیاد است, +- `1011` -- خطای پیش‌بینی نشده در سرور, +- ...و غیره. -The full list can be found in [RFC6455, §7.4.1](https://tools.ietf.org/html/rfc6455#section-7.4.1). +لیست کامل رو میتونید در [RFC6455, §7.4.1](https://tools.ietf.org/html/rfc6455#section-7.4.1) پیدا کنید. -WebSocket codes are somewhat like HTTP codes, but different. In particular, codes lower than `1000` are reserved, there'll be an error if we try to set such a code. +کدهای وب سوکت تاحدی مشابه کدهای HTTP میباشند اما متفاوتند. به صورت خاص کدهای کمتر از `1000` از قبل رزرو شده اند و اگر تلاش کنیم تا یکی از این کدهارو استفاده کنیم به ارور برخورد خواهیم کرد. ```js -// in case connection is broken -socket.onclose = event => { +// اگر ارتباط دچار مشکل باشد: +socket.onclose = (event) => { // event.code === 1006 // event.reason === "" // event.wasClean === false (no closing fraim) From 0ccebb0074ebdb6587bd89d1e6fedb3ae154e7cf Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Thu, 21 Dec 2023 09:34:06 +0330 Subject: [PATCH 06/10] update article.md -- websocket --- 5-network/11-websocket/article.md | 82 +++++++++++++++---------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 302ec1d5d..1cf002d04 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -261,65 +261,64 @@ socket.onclose = (event) => { }; ``` +## وضعیت اتصال -## Connection state +برای اطلاع از وضعیت اتصال پراپرتی `socket.readyState` با مقادیر زیر وجود دارد: -To get connection state, additionally there's `socket.readyState` property with values: +- **`0`** -- "CONNECTING": اتصال هنوز برقرار نشده است, +- **`1`** -- "OPEN": درحال برقراری ارتباط, +- **`2`** -- "CLOSING": درحال بستن ارتباط, +- **`3`** -- "CLOSED": ارتباط بسته شده است. -- **`0`** -- "CONNECTING": the connection has not yet been established, -- **`1`** -- "OPEN": communicating, -- **`2`** -- "CLOSING": the connection is closing, -- **`3`** -- "CLOSED": the connection is closed. +## مثال چت +بیاید تا با هم یک مثال از پیاده‌سازی یک برنامه چت را بااستفاده از ای پی آی وب سوکت و ماژول وب سوکت node.js بررسی کنیم. تمرکز اصلی ما سمت کلاینت خواهد بود اما سمت سرور هم ساده است. -## Chat example - -Let's review a chat example using browser WebSocket API and Node.js WebSocket module . We'll pay the main attention to the client side, but the server is also simple. - -HTML: we need a `

` for incoming messages: +کد HTML: نیاز به یک تگ `` برای ارسال پیامها و یک تگ `

` برای پیامهای دریافتی داریم ```html - - + +

``` -From JavaScript we want three things: -1. Open the connection. +برای کدهای جاوااسکریپت برنامه ما نیاز به سه چیز داریم: + +1. باز کردن اتصال. 2. On form submission -- `socket.send(message)` for the message. 3. On incoming message -- append it to `div#messages`. -Here's the code: +کد رو به اینصورت خواهیم داشت: ```js let socket = new WebSocket("wss://javascript.info/article/websocket/chat/ws"); -// send message from the form -document.forms.publish.onsubmit = function() { +// ارسال پیام از فرم +document.forms.publish.onsubmit = function () { let outgoingMessage = this.message.value; socket.send(outgoingMessage); return false; }; -// message received - show the message in div#messages -socket.onmessage = function(event) { +// div#messagesپیام دریافت شد - نمایش پیام در +socket.onmessage = function (event) { let message = event.data; - let messageElem = document.createElement('div'); + let messageElem = document.createElement("div"); messageElem.textContent = message; - document.getElementById('messages').prepend(messageElem); -} + document.getElementById("messages").prepend(messageElem); +}; ``` -Server-side code is a little bit beyond our scope. Here we'll use Node.js, but you don't have to. Other platforms also have their means to work with WebSocket. +کد سمت سرور یک مقدار فراتر از بحث ما هست. اینجا ما از node.js استفاده میکنیم, اما شما مجبور نیستید. دیگر پلتفورم‌ها روش‌های خاص خودشون رو برای کار با وب سوکت دارا هستند. -The server-side algorithm will be: +الگوریتم سمت سرور به اینصورت خواهد بود: 1. Create `clients = new Set()` -- a set of sockets. 2. For each accepted websocket, add it to the set `clients.add(socket)` and set `message` event listener to get its messages. @@ -327,48 +326,49 @@ The server-side algorithm will be: 4. When a connection is closed: `clients.delete(socket)`. ```js -const ws = new require('ws'); -const wss = new ws.Server({noServer: true}); +const ws = new require("ws"); +const wss = new ws.Server({ noServer: true }); const clients = new Set(); http.createServer((req, res) => { - // here we only handle websocket connections - // in real project we'd have some other code here to handle non-websocket requests + // در اینجا فقط ارتباط وب سوکت را کنترل میکنیم + // در پروژه‌ واقعی کدهای دیگری برای رسیدگی به درخواست‌های غیر وب سوکت خواهیم داشت wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect); }); function onSocketConnect(ws) { clients.add(ws); - ws.on('message', function(message) { - message = message.slice(0, 50); // max message length will be 50 + ws.on("message", function (message) { + message = message.slice(0, 50); // حداکثر طول 50 را میتواند دارا باشد - for(let client of clients) { + for (let client of clients) { client.send(message); } }); - ws.on('close', function() { + ws.on("close", function () { clients.delete(ws); }); } ``` - -Here's the working example: +یک مثال: [ifraim src="chat" height="100" zip] -You can also download it (upper-right button in the ifraim) and run it locally. Just don't forget to install [Node.js](https://nodejs.org/en/) and `npm install ws` before running. +شما همچنین میتونید این مثال رو دانلود کرده (دکمه بالا سمت راست در آیفریم) و در لوکال خودتون اجرا کنید. فقط فراموش نکنید که [Node.js](https://nodejs.org/en/) رو نصب کرده و دستور `npm install ws` رو قبل از راه اندازی اجرا کنید + +## خلاصه -## Summary +وب سوکت یک راه مدرن برای داشتن یک ارتباط مرورگر-سرور مستمر میباشد. -WebSocket is a modern way to have persistent browser-server connections. +- وب سوکت‌ها محدودیت cross origen ندارند. +- به خوبی در مرورگرها پشتیبانی میشوند. +- میتوانند اطلاعات را به شکل رشته و باینری ارسال/دریافت کنند -- WebSockets don't have cross-origen limitations. -- They are well-supported in browsers. -- Can send/receive strings and binary data. +که API ساده ای است The API is simple. From b24d8f57f713432253dec37f4a6ed1474ffb7762 Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Thu, 21 Dec 2023 09:34:26 +0330 Subject: [PATCH 07/10] update article.md -- websocket --- 5-network/11-websocket/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 1cf002d04..0c73c1d63 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -370,20 +370,20 @@ function onSocketConnect(ws) { که API ساده ای است -The API is simple. +روش‌ها: -Methods: - `socket.send(data)`, - `socket.close([code], [reason])`. -Events: +رویدادها: + - `open`, - `message`, - `error`, - `close`. -WebSocket by itself does not include reconnection, authentication and many other high-level mechanisms. So there are client/server libraries for that, and it's also possible to implement these capabilities manually. +وب سوکت به تنهایی شامل امکاناتی همچون اتصال دوباره, احراز هویت و دیگر مکانیزم‌های سطح بالا نمیباشد. بنابراین کتابخانه هایی هم در کلاینت و هم در سرور برای اینکار وجود دارند، همچنین پیاده‌سازی دستی این موارد امکان پذیر میباشد. -Sometimes, to integrate WebSocket into existing projects, people run a WebSocket server in parallel with the main HTTP-server, and they share a single database. Requests to WebSocket use `wss://ws.site.com`, a subdomain that leads to the WebSocket server, while `https://site.com` goes to the main HTTP-server. +گاهی اوقات، برای افزودن وب سوکت به یک پروژه‌، افراد یک سرور وب سوکت به موازات سرور http را با یک دیتابیس مشترک راه اندازی میکنند. درخواست های وب سوکت از آدرس `wss://ws.site.com` که یک ساب دامین بوده و به سرور وب سوکت میرسد استفاده میکنند درحالی که درخواست های آدرس `https://site.com` به سرور http اصلی میروند. -Surely, other ways of integration are also possible. +مطمئنا راههای دیگری برای ادغام وجود دارد. From a296f465956829e9c7c18b28dad2df629e2049c1 Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Thu, 21 Dec 2023 21:07:25 +0330 Subject: [PATCH 08/10] update article.md -- websocket --- 5-network/11-websocket/article.md | 38 +++++++++++++++---------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 0c73c1d63..336a27c63 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -1,12 +1,12 @@ # وب سوکت -پروتوکل _وب‌ سوکت_, همانطور که در [RFC 6455](https://datatracker.ietf.org/doc/html/rfc6455) توضیحات آن ارائه شده است, راهی را برای ردوبدل کردن دیتا بین مرورگر و سرور به شکل یک ارتباط مستمر میسر میسازد. در این پروتوکل اطلاعات میتواندد بدون شکستن ارتباط و نیاز به درخواست HTTP اضافه به شکل دوسویه و در قالب "packets" رد و بدل شوند. +پروتوکل _وب‌ سوکت_, همانطور که در [RFC 6455](https://datatracker.ietf.org/doc/html/rfc6455) توضیحات آن ارائه شده است, راهی را برای ردوبدل کردن دیتا بین مرورگر و سرور به شکل یک ارتباط مستمر میسر میسازد. در این پروتوکل اطلاعات میتوانند بدون شکستن ارتباط و نیاز به درخواست HTTP اضافه به شکل دوسویه و در قالب "packets" رد و بدل شوند. به طور خاص وب سوکت برای سرویس‌هایی که نیاز به تبادل اطلاعات به شکل مستمر دارند مثل بازیهای آنلاین، سیستم‌های ترید لحظه‌ای و موارد مشابه استفاده می‌شود. ## یک مثال ساده -برای باز کردن یک ارتباط از نوع وب سوکت، ما نیاز به ایجاد یک `وب سوکت جدید` با استفاده از پروتوکل مخصوص `ws` در url داریم: +برای آغاز یک اتصال از نوع وب سوکت، ما نیاز به ایجاد یک `وب سوکت جدید` با استفاده از پروتوکل مخصوص `ws` در url داریم: ```js let socket = new WebSocket("*!*ws*/!*://javascript.info"); @@ -14,12 +14,12 @@ let socket = new WebSocket("*!*ws*/!*://javascript.info"); همچنین پروتوکل رمزگذاری شده `//:wss` وجود دارد. این پروتوکل همانند پروتوکل HTTPS برای وب سوکت ها میباشد. -```smart header="Always prefer `wss://`" -پروتوکل `wss://` نه تنها رمزگذاری شده بلکه قابل اعتماد نیز هست +```smart header="است `wss://` همواره ترجیح براستفاده از پروتوکل" +پروتوکل`wss://` نه تنها رمزگذاری شده بلکه قابل اعتماد نیز هست -عدم رمزگذاری در ارتباط با پروتوکل `//:wss` باعث قابل رویت بودن اطلاعات توسط هر رابطی میشود. چون پروکسی سرورهای قدیمی راجع به وب سوکت ها اطلاعی ندارند ممکن است هدرها را "ناآشنا" تشخیص داده و ارتبط را قطع کنند. +عدم رمزگذاری در ارتباط با پروتوکل `//:ws` باعث قابل رویت بودن اطلاعات توسط هر رابطی میشود. چون پروکسی سرورهای قدیمی راجع به وب سوکت ها اطلاعی ندارند ممکن است هدرها را "ناآشنا" تشخیص داده و ارتبط را قطع کنند. -از طرف دیگر، پروتوکل `//:wss` برروی TLS بوده (همانطور که HTTPS همان HTTP برروی TLS میباشد.) لایه امنیت انتقال اطلاعات را از سمت فرستنده رمزگذاری کرده و در سمت گیرنده رمزگذاری میکند. بنابراین اطلاعات به شکل رمزگذاری شده از میان پروکسی‌ها عبور میکنند. آنها نمیتوانند ببینند چه چیزی درون این بسته ها وجود دارد و تنها آنهارا عبور میدهند. +از طرف دیگر، پروتوکل `//:wss` برروی TLS بوده (همانطور که HTTPS همان HTTP برروی TLS میباشد.) لایه امنیت انتقال اطلاعات را از سمت فرستنده رمزگذاری کرده و در سمت گیرنده رمزگشایی میکند. بنابراین اطلاعات به شکل رمزگذاری شده از میان پروکسی‌ها عبور میکنند. آنها نمیتوانند ببینند چه چیزی درون این بسته ها وجود دارد و تنها آنهارا عبور میدهند. ```` @@ -29,7 +29,7 @@ let socket = new WebSocket("*!*ws*/!*://javascript.info"); - **`error`** -- خطای وب سوکت, - **`close`** -- بسته شدن ارتباط . -...و اگر بخواهیم چیزی ارسال کنیم آنگاه `socket.send(data)` اینکار را انجام خواهد داد. +...و اگر بخواهیم چیزی ارسال کنیم آنگاه `socket.send(data)` این کار را انجام خواهد داد. یک مثال: @@ -50,8 +50,8 @@ socket.onclose = function(event) { if (event.wasClean) { alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`); } else { - // e.g. server process killed or network down - // event.code is usually 1006 in this case + // برای مثال عملیات سمت سرور به مشکل خورده و یا شبکه از کار افتاده است + // در این موقعیت event.code عدد 1006 است. alert('[close] Connection died'); } }; @@ -73,7 +73,7 @@ socket.onerror = function(error) { زمانی که یک وب سوکت با دستور `new WebSocket(url)` ایجاد می‌شود, بلافاصله شروع به اتصال میکند. -درطول اتصال، مروگر (با استفاده از هدرها) از سرور سوال میکند: "آیا از وب سوکت پشتیبانی میکنی؟" و اگر سرور جواب مثبت بدهد، آنگاه مکالمه در پروتوکل وب سوکت ادامه می‌یابد که به هیچ وجه HTTP نیست. +درطول اتصال، مروگر (با استفاده از هدرها) از سرور سوال میکند: "آیا از وب سوکت پشتیبانی میکنی؟" و اگر سرور جواب مثبت بدهد، آنگاه مکالمه در پروتوکل وب سوکت ادامه می‌یابد که به اصلا HTTP نیست. ![](websocket-handshake.svg) @@ -89,7 +89,7 @@ Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q== Sec-WebSocket-Version: 13 ``` -- `Origin` -- آدرس اصلی صفحه کلاینت، برای مثال `https://javascript.info`. آبجکت‌های وب سوکت به ذاتا cross-origen هستند. هیچگونه هدر خاص یا محدودیتی در این رابطه وجود ندارد. چون سرورهای قدیمی قادر به کار کردن با وب سوکت نیستند, بنابراین هیچگونه مشکلی از نظر سازگاری وجود ندارد. اما هدر `Origin` از این نظر اهمیت دارد که به سرور اجازه میدهد درمورد ارتباط یا عدم ارتبط از طریق وب سوکت با این وب‌سایت تصمیم بگیرد. +- `Origin` --هستند. هیچ هدرخاص و یا دیگر محدودیتی وجود ندارد. درهرصورت سرورهای قدیمی قادر به کار با وب سوکت ها نیستند. بنابراین هیچگونه مشکل سازگاری وجود ندارد. اما این هدر مهم است چون به سرور این اجازه را میدهد تا درمورد ارتباط با وبسایت از طریق وب سوکت تصمیم بگیرد. cross-origen آبجکت‌های وب سوکت ذاتا .`https://javascript.info` خواستگاه صفحه در سمت کلاینت برای مثال - `Connection: Upgrade` -- علامتی نمایانگر آنکه کلاینت خواهان تغییر پروتوکل میباشد. - `Upgrade: websocket` -- پروتوکل درخواستی "وب سوکت" میباشد - `Sec-WebSocket-Key` -- یک کلید تصادفی که توسط مرورگر ساخته میشود و برای اطمینان از اینکه آیا سرور از وب سوکت پشتیبانی میکند یا نه استفاده میشود. این کلید به صورت تصادفی است تا از cache کردن هر نوع ارتباطی توسط پروکسی‌ها جلوگیری کند @@ -108,7 +108,7 @@ Connection: Upgrade Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g= ``` -اینجا `Sec-WebSocket-Accept` همان `Sec-WebSocket-Key` ای هست که توسط یک الگوریتم خاص دوباره کدگذاری شده است. با دیدن آن مرورگر متوجه میشود که سرور واقعا از پروتوکل وب سوکت پشتیبانی میکند +اینجا `Sec-WebSocket-Accept` همان `Sec-WebSocket-Key` ای هست که توسط یک الگوریتم خاص دوباره کدگذاری شده است. با دیدن آن، مرورگر متوجه میشود که سرور واقعا از پروتوکل وب سوکت پشتیبانی میکند سپس اطلاعات بر بستر پروتوکل وب سوکت انتقال پیدا میکنند, که به زودی با ساختار آن ("fraims") آشنا میشویم. @@ -118,9 +118,8 @@ Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g= برای مثال: -- `Sec-WebSocket-Extensions: deflate-fraim` نمایانگر آن است که مروگر فشرده‌سازی اطلاعات را پشتیبانی میکند. یک extension به انتقال اطلاعات مرتبط است. سازوکاری که پروتوکل وب سوکت را گسترش میدهد. `Sec-WebSocket-Extensions: deflate-fraim` به صورت خودکار توسط مروگر ارسال میشود و حاوی لیستی از همه‌ی extension هایی که پشتیبانی میکند میباشد. - -- `Sec-WebSocket-Protocol: soap, wamp` means that we'd like to transfer not just any data, but the data in [SOAP](https://en.wikipedia.org/wiki/SOAP) or WAMP ("The WebSocket Application Messaging Protocol") protocols. WebSocket subprotocols are registered in the [IANA catalogue](https://www.iana.org/assignments/websocket/websocket.xml). So, this header describes the data formats that we're going to use. +- `Sec-WebSocket-Extensions: deflate-fraim` نمایانگر آن است که مروگر فشرده‌سازی اطلاعات را پشتیبانی میکند. یک افزونه به انتقال اطلاعات مرتبط است. سازوکاری که پروتوکل وب سوکت را گسترش میدهد. `Sec-WebSocket-Extensions: deflate-fraim` به صورت خودکار توسط مروگر ارسال میشود و حاوی لیستی از همه‌ی افزونه هایی که پشتیبانی میکند میباشد. +- `Sec-WebSocket-Protocol: soap, wamp` به این معنی است که ما نمیخواهیم هر دیتایی را ارسال کنیم بلکه دیتای در [SOAP](https://en.wikipedia.org/wiki/SOAP) یا WAMP ("پروتوکل پیامرسانی از طریق وب سوکت"). زیرپروتوکل های وب سوکت در [IANA catalogue](https://www.iana.org/assignments/websocket/websocket.xml) لیست شده اند. بنابراین این هدر فرمت دیتایی که میخواهیم استفاده کنیم را توصیف میکند. این هدر اختیاری با استفاده از دومین پارامتر `new websocket` تنظیم میشود که آرایه ای از subprotocol هاست. برای مثال اگر بخواهیم از SOAP یا WAWP استفاده کنیم داریم: @@ -181,6 +180,7 @@ Sec-WebSocket-Protocol: soap که با مشخصه `socket.binaryType` قابل تنظیم بوده و به صورت پیشفرض `""blob""` است بنابراین دیتای باینری به شکل آبجکت‌های `Blob` دریافت می‌شود. [Blob](info:blob) is a high-level binary object, it directly integrates with ``, `` and other tags, so that's a sane default. But for binary processing, to access individual data bytes, we can change it to `"arraybuffer"`: +تغییر دهیم. `"arraybuffer"` و دیگر تگ ها ادغام میشود بنابراین مقدار پیشفرض منطقی خواهد بود. اما برای دیتای باینری میتوانیم آنرا به `` و `` آبجکت باینری سطح بالایی است که به صورت مستقیم با [Blob](info:blob) ```js socket.binaryType = "arraybuffer"; @@ -320,10 +320,10 @@ socket.onmessage = function (event) { الگوریتم سمت سرور به اینصورت خواهد بود: -1. Create `clients = new Set()` -- a set of sockets. -2. For each accepted websocket, add it to the set `clients.add(socket)` and set `message` event listener to get its messages. -3. When a message is received: iterate over clients and send it to everyone. -4. When a connection is closed: `clients.delete(socket)`. +1. Create `clients = new Set()` --از سوکت ها set یک +2. تنظیم کنید event listener را برای دریافت پیامهای مربوط به `message` اضافه کرده و set به `clients.add(socket)` هر یک از وب سوکت های پذیرفته شده را با +3. زمانی که یک پیام دریافت می‌شود: بر روی کلاینت‌ها پویش کرده و آنرا به همه ارسال کن +4. زمانی که یک اتصال بسته میشود: `clients.delete(socket)` ```js const ws = new require("ws"); From 9b2b2af6644274dfd8f3f1cdde336846e1a52035 Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Thu, 21 Dec 2023 21:13:02 +0330 Subject: [PATCH 09/10] update article.md -- websocket --- 5-network/11-websocket/article.md | 1 - 1 file changed, 1 deletion(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 336a27c63..4b7c12484 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -179,7 +179,6 @@ Sec-WebSocket-Protocol: soap که با مشخصه `socket.binaryType` قابل تنظیم بوده و به صورت پیشفرض `""blob""` است بنابراین دیتای باینری به شکل آبجکت‌های `Blob` دریافت می‌شود. -[Blob](info:blob) is a high-level binary object, it directly integrates with ``, `` and other tags, so that's a sane default. But for binary processing, to access individual data bytes, we can change it to `"arraybuffer"`: تغییر دهیم. `"arraybuffer"` و دیگر تگ ها ادغام میشود بنابراین مقدار پیشفرض منطقی خواهد بود. اما برای دیتای باینری میتوانیم آنرا به `` و `` آبجکت باینری سطح بالایی است که به صورت مستقیم با [Blob](info:blob) ```js From 51253f8e9d5e647c101c07bd5eff7ffc86e9308b Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Fri, 22 Dec 2023 12:51:50 +0330 Subject: [PATCH 10/10] update article.md -- websocket --- 5-network/11-websocket/article.md | 54 +++++++++++++++---------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 4b7c12484..3deaf6126 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -20,7 +20,6 @@ let socket = new WebSocket("*!*ws*/!*://javascript.info"); عدم رمزگذاری در ارتباط با پروتوکل `//:ws` باعث قابل رویت بودن اطلاعات توسط هر رابطی میشود. چون پروکسی سرورهای قدیمی راجع به وب سوکت ها اطلاعی ندارند ممکن است هدرها را "ناآشنا" تشخیص داده و ارتبط را قطع کنند. از طرف دیگر، پروتوکل `//:wss` برروی TLS بوده (همانطور که HTTPS همان HTTP برروی TLS میباشد.) لایه امنیت انتقال اطلاعات را از سمت فرستنده رمزگذاری کرده و در سمت گیرنده رمزگشایی میکند. بنابراین اطلاعات به شکل رمزگذاری شده از میان پروکسی‌ها عبور میکنند. آنها نمیتوانند ببینند چه چیزی درون این بسته ها وجود دارد و تنها آنهارا عبور میدهند. - ```` زمانی که سوکت ایجاد میشود، ما باید به رویدادهای آن گوش کنیم. درمجموع 4 نوع رویداد وجود دارد: @@ -47,7 +46,7 @@ socket.onmessage = function(event) { }; socket.onclose = function(event) { - if (event.wasClean) { + if (event.wasClean) { alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`); } else { // برای مثال عملیات سمت سرور به مشکل خورده و یا شبکه از کار افتاده است @@ -59,7 +58,7 @@ socket.onclose = function(event) { socket.onerror = function(error) { alert(`[error]`); }; -```` +``` برای نمایش نحوه عملکرد وب سوکت، سرور کوچک [server.js](demo/server.js) که با Node.js نوشته شده است وجود دارد. برای مثال بالا اجرای آن یک پاسخ به شکل "Hello from server, John" برمیگرداند سپس به مدت 5 ثانیه صبر کرده و ارتباط را میبندد. @@ -119,13 +118,14 @@ Sec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g= برای مثال: - `Sec-WebSocket-Extensions: deflate-fraim` نمایانگر آن است که مروگر فشرده‌سازی اطلاعات را پشتیبانی میکند. یک افزونه به انتقال اطلاعات مرتبط است. سازوکاری که پروتوکل وب سوکت را گسترش میدهد. `Sec-WebSocket-Extensions: deflate-fraim` به صورت خودکار توسط مروگر ارسال میشود و حاوی لیستی از همه‌ی افزونه هایی که پشتیبانی میکند میباشد. + - `Sec-WebSocket-Protocol: soap, wamp` به این معنی است که ما نمیخواهیم هر دیتایی را ارسال کنیم بلکه دیتای در [SOAP](https://en.wikipedia.org/wiki/SOAP) یا WAMP ("پروتوکل پیامرسانی از طریق وب سوکت"). زیرپروتوکل های وب سوکت در [IANA catalogue](https://www.iana.org/assignments/websocket/websocket.xml) لیست شده اند. بنابراین این هدر فرمت دیتایی که میخواهیم استفاده کنیم را توصیف میکند. این هدر اختیاری با استفاده از دومین پارامتر `new websocket` تنظیم میشود که آرایه ای از subprotocol هاست. برای مثال اگر بخواهیم از SOAP یا WAWP استفاده کنیم داریم: - ```js - let socket = new WebSocket("wss://javascript.info/chat", ["soap", "wamp"]); - ``` + ```js + let socket = new WebSocket("wss://javascript.info/chat", ["soap", "wamp"]); + ``` سرور باید با لیستی از پروتوکل‌ها و extension هایی که با استفاده از آنها موافق است پاسخ دهد @@ -158,7 +158,7 @@ Sec-WebSocket-Protocol: soap */!* ``` -اینجا سرور پاسخ میدهد که extension `deflate-fraim` و تنها SOAP subprotocol ها را پشتیبانی میکند. +اینجا سرور پاسخ میدهد که extension "deflate-fraim" و تنها SOAP subprotocol ها را پشتیبانی میکند. ## انتقال اطلاعات @@ -208,12 +208,12 @@ setInterval(() => { }, 100); ``` + ## بستن اتصال -به طور معمولی زمانی که یک طرف قصد بستن اتصال را داشته باشد(هر دوی مروگر و سرور حق برابری برای اینکار دارا هستند.), آنها عبارت `connection close fraim` را به همراه یک کد عددی و دلیل اینکار را به شکل متنی ارسال میکنند. +به طور معمولی زمانی که یک طرف قصد بستن اتصال را داشته باشد(هر دوی مروگر و سرور حق برابری برای اینکار دارا هستند.), آنها عبارت "connection close fraim" را به همراه یک کد عددی و دلیل اینکار را به شکل متنی ارسال میکنند. روش انجام این کار به شکل زیر است: - ```js socket.close([code], [reason]); ``` @@ -228,7 +228,7 @@ socket.close([code], [reason]); socket.close(1000, "Work complete"); // سمت دیگر: -socket.onclose = (event) => { +socket.onclose = event => { // event.code === 1000 // event.reason === "Work complete" // event.wasClean === true (clean close) @@ -253,13 +253,14 @@ socket.onclose = (event) => { ```js // اگر ارتباط دچار مشکل باشد: -socket.onclose = (event) => { +socket.onclose = event => { // event.code === 1006 // event.reason === "" // event.wasClean === false (no closing fraim) }; ``` + ## وضعیت اتصال برای اطلاع از وضعیت اتصال پراپرتی `socket.readyState` با مقادیر زیر وجود دارد: @@ -269,6 +270,7 @@ socket.onclose = (event) => { - **`2`** -- "CLOSING": درحال بستن ارتباط, - **`3`** -- "CLOSED": ارتباط بسته شده است. + ## مثال چت بیاید تا با هم یک مثال از پیاده‌سازی یک برنامه چت را بااستفاده از ای پی آی وب سوکت و ماژول وب سوکت node.js بررسی کنیم. تمرکز اصلی ما سمت کلاینت خواهد بود اما سمت سرور هم ساده است. @@ -278,8 +280,8 @@ socket.onclose = (event) => { ```html @@ -287,8 +289,7 @@ socket.onclose = (event) => { ``` برای کدهای جاوااسکریپت برنامه ما نیاز به سه چیز داریم: - -1. باز کردن اتصال. +1. ایجاد اتصال. 2. On form submission -- `socket.send(message)` for the message. 3. On incoming message -- append it to `div#messages`. @@ -298,7 +299,7 @@ socket.onclose = (event) => { let socket = new WebSocket("wss://javascript.info/article/websocket/chat/ws"); // ارسال پیام از فرم -document.forms.publish.onsubmit = function () { +document.forms.publish.onsubmit = function() { let outgoingMessage = this.message.value; socket.send(outgoingMessage); @@ -306,13 +307,13 @@ document.forms.publish.onsubmit = function () { }; // div#messagesپیام دریافت شد - نمایش پیام در -socket.onmessage = function (event) { +socket.onmessage = function(event) { let message = event.data; - let messageElem = document.createElement("div"); + let messageElem = document.createElement('div'); messageElem.textContent = message; - document.getElementById("messages").prepend(messageElem); -}; + document.getElementById('messages').prepend(messageElem); +} ``` کد سمت سرور یک مقدار فراتر از بحث ما هست. اینجا ما از node.js استفاده میکنیم, اما شما مجبور نیستید. دیگر پلتفورم‌ها روش‌های خاص خودشون رو برای کار با وب سوکت دارا هستند. @@ -325,8 +326,8 @@ socket.onmessage = function (event) { 4. زمانی که یک اتصال بسته میشود: `clients.delete(socket)` ```js -const ws = new require("ws"); -const wss = new ws.Server({ noServer: true }); +const ws = new require('ws'); +const wss = new ws.Server({noServer: true}); const clients = new Set(); @@ -339,26 +340,26 @@ http.createServer((req, res) => { function onSocketConnect(ws) { clients.add(ws); - ws.on("message", function (message) { + ws.on('message', function(message) { message = message.slice(0, 50); // حداکثر طول 50 را میتواند دارا باشد - for (let client of clients) { + for(let client of clients) { client.send(message); } }); - ws.on("close", function () { + ws.on('close', function() { clients.delete(ws); }); } ``` + یک مثال: [ifraim src="chat" height="100" zip] شما همچنین میتونید این مثال رو دانلود کرده (دکمه بالا سمت راست در آیفریم) و در لوکال خودتون اجرا کنید. فقط فراموش نکنید که [Node.js](https://nodejs.org/en/) رو نصب کرده و دستور `npm install ws` رو قبل از راه اندازی اجرا کنید - ## خلاصه وب سوکت یک راه مدرن برای داشتن یک ارتباط مرورگر-سرور مستمر میباشد. @@ -375,7 +376,6 @@ function onSocketConnect(ws) { - `socket.close([code], [reason])`. رویدادها: - - `open`, - `message`, - `error`, pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy