كيفية إرسال رسالة نصية من جافا سكريبت

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

كيفية إرسال رسالة نصية من جافا سكريبت
الشكل 1 - كيفية إرسال رسالة نصية من جافا سكريبت

كود جافا سكريبت لإرسال رسالة نصية إلى الهاتف المحمول

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

SendSms.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>إرسال رسالة نصية باستخدام بوابة 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="SendSms.css">
    </head>
    <body>

        <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="btnSend">
                <b>إرسال</b>
            </button>
        </div>

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

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

            var btnSend = document.getElementById("btnSend");
                        
            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);

            btnSend.addEventListener("click", async function() {
                var msg = new Message();
                msg.ToAddress = document.getElementById("ToAddress").value;
                msg.Text = document.getElementById("Text").value;

                let result = await api.Send(msg);

                document.getElementById('log-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 لإرسال الرسالة النصية إلى بوابة الرسائل النصية. ستقوم بوابة الرسائل النصية بإعادة توجيه رسالتك إلى شبكة الهاتف المحمول إما عبر اتصال لاسلكي أو عبر الإنترنت.

تحميل SendSms.js

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

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

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

دليل إرسال الرسائل النصية بجافا سكريبت
الشكل 2 - ما الموجود داخل SendSms.js.zip

كيفية إرسال رسالة نصية من جافا سكريبت (إرشادات بسيطة)

لإرسال رسالة نصية من جافا سكريبت:

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

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

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

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

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

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

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

مصادقة HTTP لإرسال الرسائل القصيرة من 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 لإرسال الرسائل القصيرة من JavaScript

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

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

طلب HTTP لإرسال الرسائل القصيرة من JavaScript

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

POST /api?action=sendmsg HTTP/1.1
Connection: close
Content-Length: 418
Content-Type: text/plain;charset=UTF-8
Accept: */*
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509
User-Agent: node-XMLHttpRequest
 
{
	"messages": [
		{
			"message_id": "ca3be75b-f55d-9237-adee-e425007cd253",
			"to_address": "+36201111111",
			"text": "Hello world!",
			"create_date": "2021-07-30T11:14:56",
			"vaild_date": "2021-08-06T11:14:56",
			"time_to_send": "2021-07-30T11:14:56",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true
		}
	]
}

استجابة HTTP التي يتلقاها مثال الرسائل القصيرة JavaScript

بمجرد أن تتلقى بوابة الرسائل القصيرة هذا الطلب، ستقوم بإنشاء استجابة 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:03:09 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked

{
	"http_code": 200,
	"response_code": "SUCCESS",
	"response_msg": "Messages queued for delivery.",
	"data": {
	  "total_count": 1,
	  "success_count": 1,
	  "failed_count": 0,
	  "messages": [
	    {
	      "message_id": "ca3be75b-f55d-9237-adee-e425007cd253",
	      "from_station": "%",
	      "to_address": "+36201111111",
	      "to_station": "%",
	      "text": "Hello world!",
	      "create_date": "2021-07-30 11:14:56",
	      "valid_until": "2021-08-06 11:14:56",
	      "time_to_send": "2021-07-30 11:14:56",
	      "submit_report_requested": true,
	      "delivery_report_requested": true,
	      "view_report_requested": false,
	      "tags": [
	        {
	          "name": "Type",
	          "value": "SMS:TEXT"
	        }
	      ],
	      "status": "SUCCESS"
	    }
	  ]
	}
}

ربط بوابة الرسائل القصيرة الخاصة بك بشبكة الهاتف المحمول وإنشاء حساب مستخدم لواجهة برمجة التطبيقات HTTP

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

إنشاء مستخدم جديد (فيديو تعليمي)

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

الفيديو 1 - كيفية إعداد حساب مستخدم لواجهة برمجة التطبيقات HTTP (فيديو تعليمي)

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

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

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

مثال على الرسائل القصيرة في JavaScript: SendSms.js

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

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

الشكل 3 - SendSms.php

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

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

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

كيفية التحقق من إرسال الرسالة القصيرة إلى شبكة الهاتف المحمول

الخطوة الأخيرة في التحقق من الإجراء هي النظر إلى سجلات اتصال شبكة الهاتف المحمول. قد تحتاج إلى تفعيل التسجيل في تكوين الاتصال قبل إرسال الرسالة لرؤية السجلات. إذا كان التسجيل مفعلًا، فسترى رقم الهاتف ونص الرسالة التي أرسلتها.

اختبار ما إذا كان الطلب مقبولاً (فيديو تعليمي)

في الفيديو التالي، ستشاهد كيفية التحقق مما إذا كان عميل SMPP نجح في إرسال رسالتك. ستتعلم كيفية فتح علامة تبويب الأحداث لمستخدم SMPP وما يجب البحث عنه. الفيديو مدته 18 ثانية فقط ولكنه سيكون مفيدًا جدًا.

الفيديو 4 - كيفية اختبار ما إذا كان الطلب مقبولاً من قبل عميل SMPP (فيديو تعليمي)

استلام الرسالة القصيرة على الهاتف (فيديو تعليمي)

في الفيديو التالي، ستشاهد كيف تبدو الرسالة الواردة التي تم إرسالها من بوابة Ozeki SMS. سيبدأ بشاشة رئيسية لهاتف أندرويد وينتهي بفتح الرسالة. مدته 18 ثانية فقط ويمكنك رؤية عملية استلام الرسالة بالكامل.

الفيديو 5 - استلام رسالة SMS على الهاتف المحمول (فيديو تعليمي)

ملخص

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

لا تنهي القراءة هنا، تصفح صفحة البرامج التعليمية لـ Ozeki وتعلم عن استقبال الرسائل القصيرة في JavaScript.

الشيء التالي الذي يجب عليك فعله هو تنزيل بوابة Ozeki SMS ودع العمل يبدأ!

More information