Twilio JavaScript – 从客户端到服务器的SMS
我find了关于如何在服务器端使用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中处理一个dynamic消息。 该代码适当地在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>
我在这里有一个不同步的问题吗？
Twilio开发者在这里传道。
我可以给你一个基本的例子，这应该给你一个如何实现这个好主意。 我将从服务器端开始，你已经有了基础知识。
首先，我build议你使用POST请求，而不是GET，只是因为GET可以被用户轻松地重复或被代理caching。 我假设您使用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);
这build立了一个服务器，它从一个public目录提供静态文件，然后有一个端点， POST到/messages ，发送消息。
我们现在需要创build客户端。 我只会为了简单起见而使用HTML。 您需要一个将发送到/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>` ); });
在这种情况下，我们挂钩了submit事件的callback$form.serialize() ，使用方法（POST）向表单的action发出一个新的$.ajax请求，并包含表单数据（我们从$form.serialize() ） 。 然后，我们在函数顶部完成success和errorcallback。
让我知道这是否有帮助。