javascript - Twilio JavaScript - 从客户端到服务器的短信

Question

我找到了关于如何使用 Node 在服务器端实现 Twilio 的文档，但是，我找不到可以从我的客户端应用程序发送 SMS 的端到端示例。

谁能告诉我从客户端发送自定义短信到服务器的实现是什么样子的？

免责声明 我的服务器文件命名为app.js，我的客户端文件命名为index.js

**1- 这是我目前在我的 app.js 上设置的内容

    const express = require('express');
    const app = express();
    const path = require('path');
    const twilio = require('twilio');
    const bodyParser = require('body-parser');

   //JSON DATA
   const guests= require('./public/data/Guests');

    app.use(bodyParser.urlencoded({extended: false}));
    app.use(express.static('public'));

    //SET PORT
    app.set("port", process.env.PORT || 3000);

   //GET JSON DATA
   app.get('/data', function(req, res) {
    Promise.all([guests])//combine requests into one object
        .then(([guests]) => {
            res.send({guests});
        });
});

//CATCHALL
app.get("/*", function(req,res){
    let file = req.params[0] || "/views/index.html";
    res.sendFile(path.join(__dirname, "/public/", file));
});

//LISTEN ON PORT
app.listen(app.get("port"), function(){
    console.log("Listening on port: " , app.get("port"));
});

let client = new twilio('xxxxxxxxxx', 'xxxxxxxxxxxxx');

app.post('/sms', (request, result) => {
    const message = request.body.message;

    client.messages.create({
        to: +1847820802492359,
        from: +8475302725792530 ,
        body: message
    }).then(() => {
        // message sent successfully, redirect to the home page.
        res.redirect('/');
    }).catch((err) => {
        console.error(err);
        res.sendStatus(400);
    });
});

-2 我正在尝试处理我的 index.js 中的动态消息。 代码在 DOM 上正常运行，只是带有 Twilio 的 SMS 没有将消息发布到服务器

$(function() {
    $.ajax({
        type: "GET",
        url: "/data",
        success: res => {
            //console.log(res);
            handleMessage(res);
        },
        error: err => console.log(err)
    });

    //message method
    let handleMessage = (res) => {
        const getFirstName = res.guests.map(name => name.firstName);
        //populate drop-down select
        let handleSelect = () => {
            //adds first names to select dropDown
            $.each(getFirstName, function(i, value) {
                $('#selectName').append($('<option>').text(value).attr('value', value));
            });

        };
        handleSelect();

        let handleSubmit = () => {
            $("#form").submit(function(e) {
                e.preventDefault();
                let name = $('#selectName').val();
                let greetGuest = `Welcome ${name}!`;
                console.log(greetGuest);

                //append to Dom
                $('.showMessage').append(`<div class="newMessage"><span>${greetGuest}</span></div>`);

            });
        };
        handleSubmit()
    };
});

-3 HTML 表单

<form id="form" action="/sms" method="POST">
        <label>
            <label for=selectName>Guest
                <select id="selectName" class="select " name="sms">
                </select>
            </label>
        </label>
        <input type="submit" value="send" class="btn btn-success" />
    </form>

我这里有异步问题吗？

Answer 1

此处为 Twilio 开发人员布道师。

我可以在这里给你一个基本的例子，它应该让你很好地了解如何实现这一点。我将从服务器端开始，您已经掌握了它的基础知识。

首先，我建议您使用 POST 请求而不是 GET，因为 GET 可以很容易地被用户重复或被代理缓存。我假设您使用的是 Express作为 Web 应用程序服务器。您还需要 body-parser模块读取我们从客户端发送的数据。

const Twilio = require('twilio');
const express = require('express');
const bodyParser = require('body-parser');

const app = new express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static('public'));

const twilio = new Twilio(YOUR_ACCOUNT_SID, YOUR_AUTH_TOKEN);

app.post('/messages', (request, result) => {
  const message = request.body.message;

  twilio.messages.create({
    to: TO_NUMBER,
    from: FROM_NUMBER,
    body: message
  }).then(() => {
    // message sent successfully, redirect to the home page.
    res.redirect('/');
  }).catch((err) => {
    console.error(err);
    res.sendStatus(400);
  });
});

app.listen(3000);

这会设置一台服务器，该服务器从 public 目录提供静态文件，然后有一个端点，POST 到 /messages，即发送消息。

我们现在需要创建客户端。为了简单起见，我将在 HTML 中执行此操作。您需要一个将 POST 到 /messages 端点的表单，在本例中，该表单包含消息的单个字段。我包含了一个用于写入消息的 textarea 和一个用于提交表单的 button。如果您在运行应用程序的公共(public)目录中将其另存为 index.html，那么它应该可以工作。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Send a message!</title>
</head>
<body>
  <h1>Send a message!</h1>

  <form action="/messages" method="POST">
    <label for="message">What would you like to send?</label>
    <textarea name="message" id="message"></textarea>
    <button type="submit">Send!</button>
  </form>
</body>
</html>

让我知道这是否有帮助。

更新

所以您希望使用 Ajax 向服务器发出请求，这样您的页面就不会重新加载，并且您可以显示不同的消息。您当前的表单似乎已经删除了我添加的消息 textarea，我会重新将其放回原处。我假设您还想将消息发送给您当时欢迎的任何客人，但我不知道这在您的系统中是如何工作的，所以我现在将避免这种情况，希望您能解决这个问题。

因此，如果您将表单更新为如下内容:

<form id="form" action="/sms" method="POST">
    <label>
        <label for=selectName>Guest
            <select id="selectName" class="select " name="sms">
            </select>
        </label>
    </label>
    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>
    <input type="submit" value="send" class="btn btn-success" />
</form>

然后您需要在 JavaScript 中添加一种实际提交表单的方法(因为您使用 e.preventDefault() 阻止了提交。

const $form = $('#form');
$form.submit(function(e) {
  e.preventDefault();
  let name = $('#selectName').val();
  let greetGuest = `Welcome ${name}!`;
  console.log(greetGuest);

  $.ajax({
    url: $form.attr('action'),
    type: $form.attr('method'),
    data: $form.serialize(),
    success: function(data) {
      console.log("The message has been sent");
    },
    error: function() {
      console.error("The message couldn't be sent");
      console.error(...arguments);
    }
  })

  //append to Dom
  $('.showMessage').append(
    `<div class="newMessage"><span>${greetGuest}</span></div>`
  );
});

在这种情况下，我们挂接到提交事件的回调中，使用方法 (POST) 向表单的操作发出新的 $.ajax 请求，并包含表单数据(我们从 $form.serialize() 得到)。然后我们设置 success 和 error 回调，就像您在函数顶部所做的那样。

如果这有帮助，请告诉我。