كيفية إرسال رسائل SMS متعددة من جافا سكريبت

أبسط طريقة لإرسال رسائل SMS متعددة من جافا سكريبت هي استخدام واجهة برمجة تطبيقات HTTP/Rest المدمجة في بوابة Ozeki SMS. عند استخدام هذه الواجهة، ستقوم بإرسال رسائل SMS عن طريق إرسال طلب HTTP Post إلى بوابة الرسائل القصيرة. سيحتوي طلب HTTP Post على رسالة مُنسقة بتنسيق json. ستقوم بوابة الرسائل القصيرة بإرسال هذه الرسالة إلى هاتف المستلم، وسيتم إرجاع استجابة HTTP 200 OK لطلبك.

كيفية إرسال رسائل SMS متعددة من جافا سكريبت
الشكل 1 - كيفية إرسال رسائل SMS متعددة من جافا سكريبت

كود جافا سكريبت لإرسال رسائل SMS متعددة إلى الهاتف المحمول

يوضح مثال كود جافا سكريبت للرسائل القصيرة أدناه كيف يمكنك إرسال رسائل SMS متعددة باستخدام واجهة برمجة تطبيقات rest sms الخاصة ببوابة Ozeki SMS باستخدام مكتبة Ozeki.Libs.Rest في جافا سكريبت. هذه المكتبة مقدمة لك مجانًا، ويمكنك استخدامها وتعديلها في أي من مشاريعك.

SendMultipleSms.php 
<?php
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');
    header("Access-Control-Allow-Headers: Authorization, Accept, Content-Type");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>إرسال رسائل SMS متعددة باستخدام بوابة Ozeki SMS</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link rel="stylesheet" href="SendMultipleSms.css">
    </head>
    <body style="height: 100vh; width: 100vw; padding: 0; margin: 0;">

        <div class="form-group form-container">
            <b>إلى العنوان:</b>
            <input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
            <b>النص:</b>
            <input class="form-control" type="text" id="Text" placeholder="مرحبًا بالعالم!">
            <button class="btn btn-primary" id="btnAdd">
                <b>إضافة</b>
            </button>
            <div class="card messages-container">
                <ul class="list-group log" id="message_container">
                    <li class="list-group-item"><b>الرسائل:</b></li>
                </ul> 
            </div>
            <button class="btn btn-primary" id="btnSend">
                    <b>إرسال</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="list-group log" id="container">
                <li class="list-group-item"><b>السجلات:</b></li>
            </ul> 
        </div>

        <script type="module">
            import { Configuration, Message, MessageApi } from "./Ozeki.Libs.Rest.js";

            var messages = new Array();

            var btnSend = document.getElementById("btnSend");
            var btnAdd = document.getElementById("btnAdd");
                        
            var configuration = new Configuration();
            configuration.Username = 'http_user';
            configuration.Password = 'qwe123';
            configuration.ApiUrl = 'http://127.0.0.1:9509/api';

            var api = new MessageApi(configuration);

            btnAdd.addEventListener("click", function() {
                if (document.getElementById("ToAddress").value != '' && document.getElementById("Text").value != '') {

                    var msg = new Message();
                    msg.ToAddress = document.getElementById("ToAddress").value;
                    msg.Text = document.getElementById("Text").value;

                    document.getElementById("ToAddress").value = '';
                    document.getElementById("Text").value = '';

                    messages.push(msg);
                    
                    document.getElementById('message_container').innerHTML += `<li class="list-group-item">${msg}</li>`;
                } 
            });

            btnSend.addEventListener("click", async function() {
                let result = await api.Send(messages);

                messages = new Array();

                document.getElementById('message_container').innerHTML = `<li class="list-group-item"><b>الرسائل:</b></li>`;
                
                document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
            });
        </script>
    </body>
</html>

كيفية استخدام مثال جافا سكريبت للرسائل القصيرة:

يمكن استخدام هذا مثال جافا سكريبت للرسائل القصيرة في أي تطبيق ويب. لاستخدامه، يجب عليك إضافة ملف Ozeki.Libs.Rest.js إلى مشروعك. بعد إضافته إلى مشروعك، يجب عليك وضع التوجيه import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; في قسم الرأس من كود جافا سكريبت المصدر. سيسمح لك ذلك باستخدام الفئات المقدمة من مكتبة Ozeki.Libs.Rest. يمكنك استخدام فئة Message لإنشاء الرسالة القصيرة. يمكنك استخدام فئة MessageApi لإرسال الرسالة القصيرة إلى بوابة الرسائل. ستقوم بوابة الرسائل بإعادة توجيه رسالتك إلى شبكة الهاتف المحمول إما عبر اتصال لاسلكي أو عبر الإنترنت.

تحميل SendMultipleSms.js

يمكن تنزيل الكود المصدري الموضح في هذه المقالة واستخدامه وتعديله مجانًا.
تحميل: SendMultipleSms.js.zip (5.62 كيلوبايت)

ما هو الموجود في ملف SendMultipleSms.js.zip؟

يحتوي ملف SendMultipleSms.js.zip على مكتبة Ozeki.Libs.Rest، والتي توفر لك جميع الأدوات اللازمة لإرسال واستقبال رسائل SMS. ستجد أيضًا مشروع SendMultipleSms في الملف المضغوط، والذي يحتوي على كود المثال ليوضح لك كيفية إرسال رسالة SMS. كود المثال هذا مدرج أدناه.

دليل إرسال رسائل SMS باستخدام JavaScript
الشكل 2 - ما بداخل ملف SendMultipleSms.js.zip

كيفية إرسال رسائل SMS من JavaScript (إرشادات بسيطة)

لإرسال رسائل SMS من JavaScript:

  1. قم بتثبيت مستخدم واجهة برمجة التطبيقات HTTP
  2. قم بتمكين تسجيل أحداث الاتصال في علامة التبويب المتقدمة
  3. قم بإعداد WampServer
  4. قم بتنزيل ثم استخراج ملف SendMultipleSms.js.zip
  5. ضع محتويات الملف المضغوط في مجلد \www\ الخاص بـ wampserver: C:\wamp64\www
  6. قم بتشغيل تطبيق Ozeki SMS Gateway
  7. افتح الموقع عن طريق كتابة http://localhost/SendMultipleSms.php في متصفحك
  8. بعد فتح الموقع، يمكنك إرسال رسالة SMS بالنقر على زر الإرسال
  9. تحقق من السجلات لمعرفة ما إذا تم إرسال الرسالة

تثبيت Ozeki SMS Gateway وإنشاء مستخدم واجهة برمجة التطبيقات HTTP

لتتمكن من إرسال رسائل SMS من JavaScript، تحتاج أولاً إلى تثبيت Ozeki SMS Gateway. يمكن تثبيت بوابة الرسائل القصيرة على نفس الكمبيوتر الذي تقوم فيه بتطوير كود JavaScript في Visual Studio. بعد التثبيت، تكون الخطوة التالية هي ربط Ozeki SMS Gateway بشبكة الهاتف المحمول. يمكنك إنشاء مستخدم لواجهة برمجة تطبيقات SMS عبر HTTP. قم بإنشاء مستخدم باسم مستخدم "http_user"، وكلمة مرور "qwe123" لجعل المثال يعمل دون تعديل.

بعد إعداد البيئة، يمكنك تشغيل كود JavaScript الخاص بك.

رابط واجهة برمجة التطبيقات HTTP لإرسال رسائل SMS من JavaScript

لإرسال رسائل SMS من JavaScript، سيتعين على JavaScript الخاص بك إصدار طلب HTTP إلى بوابة الرسائل القصيرة. يظهر رابط واجهة برمجة التطبيقات أدناه. لاحظ أنه يجب استبدال عنوان IP (127.0.0.1) بعنوان IP الخاص ببوابة الرسائل القصيرة لديك. إذا كان Ozeki SMS Gateway مثبتًا على نفس الكمبيوتر الذي يعمل عليه تطبيق JavaScript لإرسال الرسائل القصيرة، يمكن أن يكون هذا 127.0.0.1. إذا كان مثبتًا على كمبيوتر مختلف، فيجب أن يكون عنوان IP الخاص بهذا الكمبيوتر. 

http://127.0.0.1:9509/api?action=rest

مصادقة HTTP لإرسال رسائل SMS من JavaScript

لمصادقة عميل JavaScript لإرسال الرسائل القصيرة، تحتاج إلى إرسال اسم المستخدم وكلمة المرور في سلسلة مشفرة بـ base64 إلى الخادم في طلب HTTP. التنسيق المستخدم هو: base64(username+":"+password). في JavaScript، يمكنك استخدام الكود التالي لإجراء هذا التشفير: 

// يمكنك العثور على مشفر Base64 في ملف Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

على سبيل المثال، إذا قمت بتشفير اسم المستخدم 'http_user' وكلمة المرور 'qwe123'، فستحصل على السلسلة المشفرة بـ base64 التالية: aHR0cF91c2VyOnF3ZTEyMw==. للإرسال

رأس طلب HTTP لإرسال رسائل SMS من JavaScript

لإرسال رسائل SMS، تحتاج إلى تضمين الأسطر التالية كرؤوس في طلب HTTP. لاحظ أننا ندرج نوع المحتوى ورأس المصادقة. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

طلب HTTP لإرسال رسائل SMS من JavaScript

لإرسال الرسائل القصيرة، سيرسل تطبيق JavaScript الخاص بك طلب HTTP مشابه للطلب أدناه. لاحظ أن هذا الطلب يحتوي على جزء رأس HTTP وجزء جسم HTTP. جسم HTTP هو سلسلة بيانات مشفرة بـ JSON. يحتوي على رقم المستلم ونص الرسالة. 

POST /api?action=sendmsg HTTP/1.1
Connection: close
Content-Length: 1028
Content-Type: text/plain;charset=UTF-8
Accept: */*
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509
User-Agent: node-XMLHttpRequest

{
	"messages": [
		{
			"message_id":"647a34a9-a852-f5e5-8a14-0619b6ddad1d",
			"to_address":"+36201111111",
			"text":"Hello world 1",
			"create_date":"2021-07-30T11:57:10",
			"vaild_date":"2021-08-06T11:57:10",
			"time_to_send":"2021-07-30T11:57:10",
			"submit_report_requested":true,
			"delivery_report_requested":true,
			"view_report_requested":true
		},
		{
			"message_id":"d918770b-c87b-8ba5-9a4a-b01e4d0f71d0",
			"to_address":"+36202222222",
			"text":"Hello world 2",
			"create_date":"2021-07-30T11:57:21",
			"vaild_date":"2021-08-06T11:57:21",
			"time_to_send":"2021-07-30T11:57:21",
			"submit_report_requested":true,
			"delivery_report_requested":true,
			"view_report_requested":true
		},
		{
			"message_id":"9c1375ae-9295-44d9-b79a-1b661f724741",
			"to_address":"+36203333333",
			"text":"Hello world 3",
			"create_date":"2021-07-30T11:57:34",
			"vaild_date":"2021-08-06T11:57:34",
			"time_to_send":"2021-07-30T11:57:34",
			"submit_report_requested":true,
			"delivery_report_requested":true,
			"view_report_requested":true
		}
	]
}

استجابة HTTP المستلمة بواسطة مثال JavaScript لرسائل SMS

بمجرد أن يستقبل بوابة الرسائل القصيرة هذا الطلب، ستقوم بإنشاء استجابة HTTP. ستحتوي استجابة HTTP على رمز حالة، للإشارة إلى ما إذا كان طلب إرسال الرسالة القصيرة ناجحًا أم لا. كما ستعود أيضًا بهيكل مشفر بتنسيق JSON لتزويدك بتفاصيل مفيدة حول إرسال الرسالة. 

HTTP/1.1 200 OK
User-Agent: OZEKI 10.3.123 (www.myozeki.com)
Content-Type: application/json; charset=utf8
Last-Modified: Fri, 30 Jul 2021 11:51:13 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked

{
	"http_code": 200,
	"response_code": "SUCCESS",
	"response_msg": "Messages queued for delivery.",
	"data": {
	  "total_count": 3,
	  "success_count": 3,
	  "failed_count": 0,
	  "messages": [
	    {
	      "message_id": "647a34a9-a852-f5e5-8a14-0619b6ddad1d",
	      "from_station": "%",
	      "to_address": "+36201111111",
	      "text": "Hello world 1",
	      "create_date": "2021-07-30 11:57:10",
	      "valid_until": "2021-08-06 11:57:10",
	      "time_to_send": "2021-07-30 11:57:10",
	      "submit_report_requested": true,
	      "delivery_report_requested": true,
	      "view_report_requested": false,
	      "tags": [
	        {
	          "name": "Type",
	          "value": "SMS:TEXT"
	        }
	      ],
	      "status": "SUCCESS"
	    },
	    {
	      "message_id": "d918770b-c87b-8ba5-9a4a-b01e4d0f71d0",
	      "from_station": "%",
	      "to_address": "+36202222222",
	      "to_station": "%",
	      "text": "Hello world 2",
	      "create_date": "2021-07-30 11:57:21",
	      "valid_until": "2021-08-06 11:57:21",
	      "time_to_send": "2021-07-30 11:57:21",
	      "submit_report_requested": true,
	      "delivery_report_requested": true,
	      "view_report_requested": false,
	      "tags": [
	        {
	          "name": "Type",
	          "value": "SMS:TEXT"
	        }
	      ],
	      "status": "SUCCESS"
	    },
	    {
	      "message_id": "9c1375ae-9295-44d9-b79a-1b661f724741",
	      "from_station": "%",
	      "to_address": "+36203333333",
	      "to_station": "%",
	      "text": "Hello world 3",
	      "create_date": "2021-07-30 11:57:34",
	      "valid_until": "2021-08-06 11:57:34",
	      "time_to_send": "2021-07-30 11:57:34",
	      "submit_report_requested": true,
	      "delivery_report_requested": true,
	      "view_report_requested": false,
	      "tags": [
	        {
	          "name": "Type",
	          "value": "SMS:TEXT"
	        }
	      ],
	      "status": "SUCCESS"
	    }
	  ]
	}
}

كيفية إرسال رسائل SMS متعددة من JavaScript باستخدام واجهة برمجة تطبيقات الرسائل القصيرة في JavaScript (فيديو تعليمي)

يعرض هذا الفيديو كيفية تنزيل ملف SendMultipleSms.js.zip من هذه الصفحة. إذا شاهدت الفيديو، ستلاحظ أن محتويات ملف SendMultipleSms.cs المضغوط توضع في مجلد \www\ الخاص بـ WampServer. ستشاهد أيضًا أننا نقوم بتشغيل WampServer بالنقر على أيقونته مرتين، وبعد ذلك نقوم بكتابة http://localhost:8080/SendMultipleSms.js في متصفح الويب.

الفيديو 1 - كيفية تنزيل وتشغيل مشروع المثال (فيديو تعليمي)

مثال JavaScript لرسائل SMS: SendMultipleSms.js

كود المثال أدناه هو جزء من ملف SendMultipleSms.php. بالإضافة إلى ذلك، ستشاهد ملفين آخرين يسمى SendMultipleSms.css و Ozeki.Libs.Rest.js.

  • ملف Ozeki.Libs.Rest.js يحتوي على جميع الأدوات اللازمة لإرسال وحذف ووضع علامة واستقبال رسائل SMS.
  • يحتوي SendMultipleSms.php على كود JavaScript وبعض العناوين التي تسمح لنا بإرسال طلبات HTTP دون أخطاء CORS.
  • يحتوي SendMultipleSms.css على ورقة الأنماط لصفحة الويب.

الشكل 3 - SendMultipleSms.php

كيفية التحقق من قبول الرسالة القصيرة بواسطة مستخدم HTTP (فيديو تعليمي)

بعد إرسال الرسالة القصيرة، من الجيد التحقق من بوابة الرسائل القصيرة لمعرفة ما تم استلامه. يمكنك التحقق من السجل عن طريق فتح تفاصيل مستخدم HTTP من وحدة تحكم إدارة بوابة Ozeki للرسائل القصيرة. يوضح الفيديو التالي ما يجب البحث عنه. سيبدأ الفيديو بالكود المفتوح وينتهي بتفاصيل الرسالة المرسلة. ستتعلم كيفية إطلاق المشروع، وكيف يبدو المشروع أثناء التشغيل وكيف يبدو ملف السجل بعده. الفيديو مدته 42 ثانية فقط وسهل الفهم. لن تواجه أي مشكلة في متابعته.

الفيديو 2 - كيفية إرسال الرسائل القصيرة باستخدام كود JavaScript أعلاه (فيديو تعليمي)

الختام

يقدم هذا الدليل جميع المعلومات الأساسية حول كيفية إرسال رسائل SMS متعددة من JavaScript باستخدام مستخدم HTTP في بوابة Ozeki للرسائل القصيرة. يمكنك الآن استخدام واجهة برمجة التطبيقات للرسائل القصيرة الموضحة لتطبيق JavaScript وإعداد اتصال مستخدم HTTP في بوابة Ozeki للرسائل القصيرة. سيكون الحل الذي تم إنشاؤه موثوقًا به وسريعًا. يمكن أن تجعل هذه الخدمة إرسال الرسائل أكثر كفاءة لأنها تتيح لك إرسال معلومات قيمة إلى أكثر من زميل واحد في وقت واحد.

ستجد العديد من المقالات الأخرى لمساعدتك في إعداد نظام مراسلة على موقع Ozeki. تأكد من مواصلة القراءة لمعرفة كيفية استخدام كيفية جدولة رسالة SMS في JavaScript.

قم بتنزيل بوابة Ozeki للرسائل القصيرة الآن. ضع ما تعلمته موضع التنفيذ!

More information