Question

我发现文档教授如何使用Node在服务器端实现Twilio，但是，我找不到一个端到端示例，我可以从客户端应用程序发送短信。

有人能告诉我将自定义短信从客户端发送到服务器的实现方式是什么？

免责声明我的服务器文件名为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 am尝试在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提交表单。如果将此保存为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个回调。

如果有帮助，请告诉我。

Twilio JavaScript - 从客户端到服务器的SMS

1 个答案:

更新