راهنمای جاوا اسکریپت در اپسان

کلاس اپسان

کلاس Appsan

کلاس Appsan برای مدیریت عناصر و رفتارهای برنامه طراحی شده است. در این قسمت به توضیح توابع مختلف این کلاس و مثال‌هایی برای هر کدام پرداخته می‌شود.

1. setProperty

این تابع مقدار یک پراپرتی از یک المان خاص را تغییر می‌دهد.

ورودی‌ها:

نوع بازگشتی: void

مثال:

appsan.setProperty('element1', 'color', 'red');

این کد رنگ المان با شناسه element1 را به قرمز تغییر می‌دهد.

2. setVariable

این تابع مقدار یک متغیر را تغییر می‌دهد. و در صورت عدم وجود آن را می سازد.

ورودی‌ها:

نوع بازگشتی: void

مثال:

appsan.setVariable('var1', 'newValue');

این کد مقدار متغیر با شناسه var1 را به newValue تغییر می‌دهد.

3. runUpdate

این تابع یک آپدیت اپسان ورودی را اجرا می کند. برای اطلاعات بیشتر به بخش آپدیت مراجعه کنید.

ورودی‌ها:

نوع بازگشتی: void

مثال:

const updateInfo = JSON.stringify({ elementId: 'element1', property: 'visible', value: true });
appsan.runUpdate(updateInfo);

این کد به‌روزرسانی‌ای را اجرا می‌کند که المان با شناسه element1 را قابل مشاهده می‌کند.

4. runAction

این تابع یک اکشن را اجرا می‌کند. برای اطلاعات بیشتر بخش اکشن ها را مطالع کنید.

ورودی‌ها:

نوع بازگشتی: void

مثال:

appsan.runAction('app/end');

این کد اکشن app/end را اجرا می‌کند.

5. findElementById

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

ورودی‌ها:

نوع بازگشتی: { id, value }

مثال:

const element = appsan.findElementById('element1');
console.log(element);

این کد المان با شناسه element1 را پیدا کرده و اطلاعات آن را در کنسول چاپ می‌کند.

کلاس کنسول

کلاس Console

کلاس Console برای مدیریت و نمایش پیام‌ها در صفحه دیباگ مورد استفاده قرار می‌گیرد. در این قسمت به توضیح توابع مختلف این کلاس و مثال‌هایی برای هر کدام پرداخته می‌شود.

1. log

این تابع یک پیام را در صفحه دیباگ نمایش می‌دهد.

ورودی‌ها:

نوع بازگشتی: void

مثال:

appsan.console.log('This is a debug message');

این کد پیامی با متن This is a debug message را در صفحه دیباگ نمایش می‌دهد.

2. clear

این تابع تمامی پیام‌های صفحه دیباگ را پاک می‌کند.

ورودی‌ها: ندارد

نوع بازگشتی: void

مثال:

appsan.console.clear();

این کد تمامی پیام‌های موجود در صفحه دیباگ را پاک می‌کند.

کلاس های درخواست HTTP

کلاس HTTPClient

برای ایمن‌سازی درخواست‌های HTTP در برنامه Appsan، توسعه‌دهندگان باید از کلاس HTTPClient استفاده کنند. این کلاس اطلاعات احراز هویت را به سرور ارسال می‌کند و فرایند احراز هویت کاربر را به صورت شفاف برای توسعه‌دهندگان انجام می‌دهد. همچنین، امکان تنظیم هدرهای پیش‌فرض و استفاده از آن‌ها در درخواست‌ها، در صورتی که هیچ هدر مشخصی ارائه نشده باشد، وجود دارد.

1. setDefaultOptions

این تابع به شما اجازه می‌دهد تا گزینه‌های پیش‌فرض از جمله هدرها را برای تمامی درخواست‌های HTTP تنظیم کنید. در صورتی که در زمان ارسال درخواست، هدر خاصی ارائه نشده باشد، این هدرهای پیش‌فرض استفاده خواهند شد.

ورودی‌ها:

نوع بازگشتی: void

مثال:

httpClient.setDefaultOptions({
  headers: { 'Authorization': 'Bearer defaultToken' }
});

این کد یک هدر پیش‌فرض Authorization تنظیم می‌کند که در صورت عدم ارائه هدر در زمان درخواست، از آن استفاده می‌شود.

HTTPOptions

HTTPOptions به شما اجازه می‌دهد تا تنظیمات بیشتری را برای درخواست‌های HTTP خود مشخص کنید. این تنظیمات به شما امکان کنترل بیشتری بر نحوه اتصال و زمان‌بندی درخواست‌ها می‌دهد.

پارامترهای موجود در HTTPOptions:

2. get

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

ورودی‌ها:

نوع بازگشتی: { subscribe: (success(), error(), finally()) => void }

مثال:

httpClient.get('https://api.example.com/data', {
  headers: { 'Authorization': 'Bearer token' }
}).subscribe(
  response => console.log(response),
  error => console.error(error),
  () => console.log('Request completed')
);

این کد یک درخواست GET به آدرس https://api.example.com/data ارسال می‌کند و هدر احراز هویت را نیز اضافه می‌کند.

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

3. post

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

ورودی‌ها:

نوع بازگشتی: { subscribe: (success(), error(), finally()) => void }

مثال:

httpClient.post('https://api.example.com/data', JSON.stringify({ key: 'value' }), {
  headers: { 'Content-Type': 'application/json' }
}).subscribe(
  response => console.log(response),
  error => console.error(error),
  () => console.log('Request completed')
);

این کد یک درخواست POST به آدرس https://api.example.com/data ارسال می‌کند و بدنه درخواست JSON را همراه با هدر نوع محتوا اضافه می‌کند.

4. put

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

ورودی‌ها:

نوع بازگشتی: { subscribe: (success(), error(), finally()) => void }

مثال:

httpClient.put('https://api.example.com/data/1', JSON.stringify({ key: 'newValue' }), {
  headers: { 'Content-Type': 'application/json' }
}).subscribe(
  response => console.log(response),
  error => console.error(error),
  () => console.log('Request completed')
);

این کد یک درخواست PUT به آدرس https://api.example.com/data/1 ارسال می‌کند و بدنه درخواست JSON را همراه با هدر نوع محتوا اضافه می‌کند.

5. delete

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

ورودی‌ها:

نوع بازگشتی: { subscribe: (success(), error(), finally()) => void }

مثال:

httpClient.delete('https://api.example.com/data/1', {
  headers: { 'Authorization': 'Bearer token' }
}).subscribe(
  response => console.log(response),
  error => console.error(error),
  () => console.log('Request completed')
);

این کد یک درخواست DELETE به آدرس https://api.example.com/data/1 ارسال می‌کند و هدر احراز هویت را نیز اضافه می‌کند.

6. patch

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

ورودی‌ها:

نوع بازگشتی: { subscribe: (success(), error(), finally()) => void }

مثال:

httpClient.patch('https://api.example.com/data/1', JSON.stringify({ key: 'updatedValue' }), {
  headers: { 'Content-Type': 'application/json' }
}).subscribe(
  response => console.log(response),
  error => console.error(error),
  () => console.log('Request completed')
);

این کد یک درخواست PATCH به آدرس https://api.example.com/data/1 ارسال می‌کند و بدنه درخواست JSON را همراه با هدر نوع محتوا اضافه می‌کند.

کلاس FormData

کلاس FormData مشابه API وب FormData برای مدیریت و ارسال داده‌های فرم استفاده می‌شود. در این بخش به توضیح توابع مختلف این کلاس و مثال‌هایی برای هر کدام پرداخته می‌شود.

توجه: کلاس FormData در حال حاضر از تابع append() از API وب پشتیبانی نمی‌کند و توسعه‌دهندگان باید از استفاده از آن خودداری کنند.

1. constructor

سازنده کلاس FormData که برای ایجاد یک شیء جدید FormData استفاده می‌شود.

ورودی‌ها: ندارد

نوع بازگشتی: FormData

مثال:

const formData = new FormData();

این کد یک شیء جدید FormData ایجاد می‌کند.

2. set

این تابع یک مقدار را به فرم داده اضافه می‌کند.

ورودی‌ها:

نوع بازگشتی: void

مثال:

formData.set('username', 'john_doe');
formData.set('profilePicture', fileInput.files[0], 'profile.jpg');

این کد یک فیلد username با مقدار john_doe و یک فیلد profilePicture با فایل انتخابی اضافه می‌کند.

3. has

این تابع بررسی می‌کند که آیا یک فیلد خاص در فرم داده وجود دارد یا خیر.

ورودی‌ها:

نوع بازگشتی: boolean

مثال:

if (formData.has('username')) {
  console.log('Username is set.');
}

این کد بررسی می‌کند که آیا فیلد username در فرم داده وجود دارد یا خیر.

4. get

این تابع مقدار یک فیلد خاص را برمی‌گرداند.

ورودی‌ها:

نوع بازگشتی: File | string

مثال:

const username = formData.get('username');
console.log(username);

این کد مقدار فیلد username را برمی‌گرداند و آن را در کنسول چاپ می‌کند.

5. delete

این تابع یک فیلد خاص را از فرم داده حذف می‌کند.

ورودی‌ها:

نوع بازگشتی: void

مثال:

formData.delete('username');

این کد فیلد username را از فرم داده حذف می‌کند.

6. forEach

این تابع برای هر فیلد در فرم داده یک تابع بازگشتی را اجرا می‌کند.

ورودی‌ها:

نوع بازگشتی: void

مثال:

formData.forEach((value, key) => {
  console.log(key, value);
});

این کد برای هر فیلد در فرم داده، نام و مقدار آن را در کنسول چاپ می‌کند.

کلاس های دسترسی و آپلود فایل

آپلود فایل‌ها

APIهای فایل در نسخه appsan-js:0.1.51 اضافه شده‌اند و امکاناتی برای آپلود فایل‌ها فراهم می‌کنند. در این بخش به معرفی کلاس‌های Blob، File و FileList و توابع مربوط به آنها پرداخته می‌شود.

کلاس Blob

کلاس Blob برای مدیریت داده‌های دودویی (binary) استفاده می‌شود.

1. constructor

این تابع برای ایجاد یک شیء Blob استفاده می‌شود.

ورودی‌ها:

نوع بازگشتی: Blob

مثال:

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

این کد یک شیء Blob با محتوای Hello, world! و نوع text/plain ایجاد می‌کند.

کلاس File

کلاس File که از کلاس Blob ارث‌بری می‌کند، برای مدیریت فایل‌ها استفاده می‌شود.

1. constructor

این تابع برای ایجاد یک شیء File استفاده می‌شود.

ورودی‌ها:

نوع بازگشتی: File

مثال:

const file = new File(['Hello, world!'], 'hello.txt', { type: 'text/plain', lastModified: Date.now() });

این کد یک شیء File با محتوای Hello, world!، نام hello.txt و نوع text/plain ایجاد می‌کند.

کلاس FileList

کلاس FileList برای مدیریت لیستی از فایل‌ها استفاده می‌شود.

1. item

این تابع یک فایل را با استفاده از اندیس آن در لیست برمی‌گرداند.

ورودی‌ها:

نوع بازگشتی: File | null

مثال:

const fileList = document.getElementById('fileInput').files;
const file = fileList.item(0);
console.log(file.name);

این کد اولین فایل در ورودی فایل را برمی‌گرداند و نام آن را در کنسول چاپ می‌کند.

2. [index: number]

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

ورودی‌ها:

نوع بازگشتی: File

مثال:

const file = fileList[0];
console.log(file.name);

این کد اولین فایل در لیست را برمی‌گرداند و نام آن را در کنسول چاپ می‌کند.

مثال: گرفتن فایل از انتخابگر فایل و آپلود آن به سرور

در این مثال یک صفحه برای آپلود فایل ساخته شده است که شامل سه دکمه برای انتخاب فایل از گالری، انتخاب فایل از دوربین و آپلود فایل می‌باشد.

کد صفحه:

<page title="File Uploader">
    <text text="File Uploader"/>
    <button text="choose from gallery" onclick="imagepicker/gallery->script/script:fileSelected($data)"/>
    <button text="choose from camera" onclick="imagepicker/camera->script/script:fileSelected($data)"/>
    <button text="upload file" onclick="script/script:uploadFile()"/>

    <script id="script">
        var selectedFile;

        function uploadFile() {
            if (!selectedFile) {
                Appsan.runAction("snackbar/'No file selected.'");
                return;
            }

            const formData = new FormData();
            formData.set('file', selectedFile);

            HTTPClient.post('http://myUploadServer/upload', formData, {
                headers:{
                    Authorization: 'Bearer 123...'
                }
            }).subscribe(res => {
                console.log(res);
            }, err => {
                console.log(err);
            });
        }

        function fileSelected(files) {
            selectedFile = files[0];
            console.log(files);
        }
    </script>
</page>

توضیح کد:

هر یک از دکمه‌ها توضیحات و عملکرد خاصی دارند:

دکمه "choose from gallery":

<button text="choose from gallery" onclick="imagepicker/gallery->script/script:fileSelected($data)"/>

این دکمه یک اکشن imagepicker/gallery را فراخوانی می‌کند که انتخاب فایل از گالری را انجام می‌دهد. پس از تکمیل اکشن، داده‌ها به صورت $data در دسترس خواهند بود و به تابع fileSelected($data) در اسکریپت script (با شناسه script) ارسال می‌شود. در این اکشن:

دکمه "choose from camera":

<button text="choose from camera" onclick="imagepicker/camera->script/script:fileSelected($data)"/>

این دکمه یک اکشن imagepicker/camera را فراخوانی می‌کند که انتخاب فایل از دوربین را انجام می‌دهد. پس از تکمیل اکشن، داده‌ها به صورت $data در دسترس خواهند بود و به تابع fileSelected($data) در اسکریپت script (با شناسه script) ارسال می‌شود. در این اکشن:

دکمه "upload file":

<button text="upload file" onclick="script/script:uploadFile()"/>

این دکمه تابع uploadFile() را در اسکریپت script (با شناسه script) فراخوانی می‌کند. در این اکشن:

اسکریپت:

<script id="script">
    var selectedFile;

    function uploadFile() {
        if (!selectedFile) {
            Appsan.runAction("snackbar/'No file selected.'");
            return;
        }

        const formData = new FormData();
        formData.set('file', selectedFile);

        HTTPClient.post('http://myUploadServer/upload', formData, {
            headers:{
                Authorization: 'Bearer 123...'
            }
        }).subscribe(res => {
            console.log(res);
        }, err => {
            console.log(err);
        });
    }

    function fileSelected(files) {
        selectedFile = files[0];
        console.log(files);
    }
</script>

متغیر selectedFile:

var selectedFile;

این متغیر برای ذخیره فایل انتخاب شده استفاده می‌شود.

تابع uploadFile:

function uploadFile() {
    if (!selectedFile) {
        Appsan.runAction("snackbar/'No file selected.'");
        return;
    }

    const formData = new FormData();
    formData.set('file', selectedFile);

    HTTPClient.post('http://myUploadServer/upload', formData, {
        headers:{
            Authorization: 'Bearer 123...'
        }
    }).subscribe(res => {
        console.log(res);
    }, err => {
        console.log(err);
    });
}

این تابع بررسی می‌کند که آیا فایلی انتخاب شده است یا خیر. اگر فایلی انتخاب نشده باشد، یک پیام خطا نمایش داده می‌شود. در غیر این صورت، یک شیء FormData ایجاد می‌کند و فایل انتخاب شده را به آن اضافه می‌کند. سپس با استفاده از HTTPClient درخواست POST برای آپلود فایل به سرور ارسال می‌شود.

تابع fileSelected:

function fileSelected(files) {
    selectedFile = files[0];
    console.log(files);
}

این تابع فایل انتخاب شده را در متغیر selectedFile ذخیره می‌کند و لیست فایل‌ها را در کنسول چاپ می‌کند. این تابع توسط اکشن script پس از انتخاب فایل در کد صدا می شود.

کلاس FileReader برای خواندن محتوای فایل

کلاس FileReader

کلاس FileReader در نسخه‌های جدید Appsan برای مدیریت عملیات خواندن فایل‌ها به صورت متنی، باینری و Data URL استفاده می‌شود. این کلاس برای خواندن محتوای یک Blob و فایل‌ها در محیط جاوااسکریپت طراحی شده است. در اینجا به معرفی متدهای این کلاس و نحوه استفاده از آن‌ها پرداخته می‌شود.

1. متدها و ویژگی‌ها

1.1 readAsText

این متد برای خواندن محتوای یک Blob یا فایل به صورت متن استفاده می‌شود.

1.2 readAsArrayBuffer

این متد برای خواندن محتوای یک Blob یا فایل به صورت باینری (آرایه‌ای از بایت‌ها) استفاده می‌شود.

1.3 readAsDataURL

این متد برای خواندن محتوای یک Blob یا فایل به صورت Data URL استفاده می‌شود. این متد در نسخه‌های بعدی Appsan ارائه خواهد شد.

2. نمونه کدها

در زیر چند نمونه کد از استفاده کلاس FileReader آورده شده است.

<script id="script-upload">
    var selectedFile;

    function readAsText() {
        if (!selectedFile) {
            Appsan.runAction("snackbar/'No file selected.'");
            return;
        }

        const reader = new FileReader();
        reader.onload = function() {
            console.log(reader.result);
            Appsan.setProperty('result', 'text', reader.result);
        }
        reader.readAsText(selectedFile);
    }

    function readAsArrayBuffer() {
        if (!selectedFile) {
            Appsan.runAction("snackbar/'No file selected.'");
            return;
        }

        const reader = new FileReader();
        reader.onload = function() {
            console.log(reader.result);
            const ab = reader.result;
            const uint8Array = new Uint8Array(ab);

            const byteString = Array.from(uint8Array).map(byte => byte.toString(16).padStart(2, '0')).join(' ');

            console.log(byteString);
            Appsan.setProperty('result', 'text', byteString);
        }
        reader.readAsArrayBuffer(selectedFile);
    }

    function readAsDataURL() {
        if (!selectedFile) {
            Appsan.runAction("snackbar/'No file selected.'");
            return;
        }

        const reader = new FileReader();
        reader.onload = function() {
            console.log(reader.result);
            Appsan.setProperty('result', 'text', reader.result);
        }
        reader.readAsDataURL(selectedFile);
    }
</script>

3. نکات مهم

کلاس ImageCompressor

مستندات کلاس ImageCompressor برای فشرده‌سازی تصاویر در Appsan

قابل دسترسی از ورژن jsscript:0.1.65

کلاس ImageCompressor به توسعه‌دهندگان امکان می‌دهد تا تصاویر را با گزینه‌های متنوعی مانند کیفیت، فرمت فشرده‌سازی و اندازه، فشرده کنند. در ادامه توضیحات و نمونه‌هایی از استفاده این کلاس ارائه شده است.

توضیحات عمومی:

کلاس ImageCompressor می‌تواند برای فشرده‌سازی فایل‌های تصویری، رشته‌های base64، و همچنین فایل‌های Blob استفاده شود. این کلاس متدی به نام compress دارد که با فراخوانی آن می‌توان عملیات فشرده‌سازی را بر روی داده‌های تصویری انجام داد. این کلاس از Promise برای مدیریت نتایج فشرده‌سازی استفاده می‌کند و امکان تعریف توابع موفقیت و خطا وجود دارد.

نحوه استفاده از ImageCompressor:

برای استفاده از این کلاس، ابتدا باید یک شیء از کلاس ImageCompressor ساخته شود و سپس متد compress برای فشرده‌سازی فراخوانی گردد.

ساختار پایه:

const compressor = new ImageCompressor();
compressor.compress(imageData, options)
    .subscribe(
        (compressedFile) => {
            // عملیات موفق
            console.log('فایل فشرده شد:', compressedFile);
        },
        (error) => {
            // عملیات ناموفق
            console.error('خطا در فشرده‌سازی:', error);
        }
    );

پارامترهای متد compress:

تنظیمات (Options):

تنظیمات فشرده‌سازی شامل موارد زیر است که می‌توانند به صورت دلخواه تعیین شوند:

نمونه کد Appsan UI:

<page title="">
    <text text="تست فشرده‌ساز"/>
    <button text="انتخاب از گالری" onclick="imagepicker/gallery->script/script:fileSelected($data)"/>
    <button text="انتخاب از دوربین" onclick="imagepicker/camera->script/script:fileSelected($data)"/>

    <button text="فشرده‌سازی فایل" onclick="script/script:compress('file')"/>
    <button text="فشرده‌سازی base64" onclick="script/script:compress('base64')"/>
    <button text="فشرده‌سازی null" onclick="script/script:compress('null')"/>
    <button text="فشرده‌سازی نوع نامعتبر" onclick="script/script:compress('invalid')"/>

    <img id="img" width="match_parent" height="300"/>
    <text id="size" text=""/>

    <script id="script">
        var selectedFile;
        var base64Image = "داده Base64";

        function fileSelected(files) {
            selectedFile = files[0];
            console.log(files);
        }

        function compress(type) {
            const compressor = new ImageCompressor();
            let imageData;
            if (type === 'file') {
                imageData = selectedFile;
            } else if (type === 'base64') {
                imageData = base64Image;
            } else if (type === 'null') {
                imageData = null;
            } else if (type === 'invalid') {
                imageData = 12345; // نوع نامعتبر
            }

            const options = {
                maxWidth: 800,
                quality: 0.9,
                compressFormat: 'WEBP'
            };

            compressor.compress(imageData, options).subscribe(compressedFile => {
                console.log('فایل فشرده‌شده:', compressedFile);
                Appsan.runAction("snackbar/'فایل با موفقیت فشرده شد.'");

                const reader = new FileReader();
                reader.onload = function() {
                    const base64Data = reader.result.split(',')[1];
                    Appsan.setProperty('img', 'src', 'base64://' + base64Data);
                    const size = base64Data.length * 0.75;
                    Appsan.setProperty('size', 'text', 'حجم: ' + size + ' بایت');
                };
                reader.readAsDataURL(compressedFile);

            }, error => {
                console.error('خطا در فشرده‌سازی:', error);
                Appsan.runAction("snackbar/'فشرده‌سازی ناموفق بود: " + error.message + "'");
            });
        }
    </script>
</page>

توضیح جاوا اسکریپت:

کلاس WebSocket

این متد ها از ورژن jsscript:0.1.72 در دسترس است.

در این بخش نحوه استفاده از وب‌سوکت‌ها در اپسان توضیح داده می‌شود. وب‌سوکت‌ها به شما امکان می‌دهند ارتباطی دوطرفه و بلادرنگ بین کلاینت و سرور برقرار کنید. ساختار وب‌سوکت در اپسان بر پایه جاوااسکریپت استاندارد است و قابلیت‌هایی مشابه دیگر کتابخانه‌های وب‌سوکت را فراهم می‌کند.

ایجاد اتصال وب‌سوکت

برای ایجاد یک اتصال جدید، از سازنده WebSocket استفاده کنید:

const ws = new WebSocket('ws://example.com/socket', ['protocol1', 'protocol2']);
ورودی‌ها:

خواص اصلی:

متدها:

  1. send(message):

    • پیامی را به سرور ارسال می‌کند.
    • ورودی: یک رشته.

    مثال:

    ws.send('Hello Server!');

  2. close():

    • اتصال وب‌سوکت را می‌بندد.

    مثال:

    ws.close();

مدیریت رویدادها با addEventListener

برای مدیریت رویدادها در وب‌سوکت، از متد addEventListener استفاده می‌کنید. این متد امکان اضافه کردن لیسنرها برای رویدادهای مختلف مانند message، open، close و error را فراهم می‌کند.

 

رویدادها:

  1. open: زمانی که اتصال وب‌سوکت باز می‌شود.

    ws.addEventListener('open', function (event) {
    console.log('Connection opened');
});

  2. message: برای دریافت پیام‌ها از سرور.

    ws.addEventListener('message', function (event) {
    console.log('Message received:', event.data);
});

  3. close: زمانی که اتصال بسته می‌شود.

    ws.addEventListener('close', function (event) {
    console.log('Connection closed:', event.code, event.reason);
});

  4. error: زمانی که خطایی رخ دهد.

    ws.addEventListener('error', function (event) {
    console.error('WebSocket error:', event.message);
});

 

برای اطلاعات بیشتر مستندات websocket وب را مطالعه نمایید