Twilio呼叫按钮和用户输入

时间:2017-11-16 05:32:46

标签: javascript twilio

所以我创建了这个应用程序,允许我通过localhost从我的Twilio帐户拨打电话号码。我只需要在端口#和我想要拨打的电话号码(localhost:2222/7786453738)之后放一个/它就会发出一个电话。但我希望用户能够通过在网页上输入电话号码然后点击按钮来拨打电话。那可能吗?到目前为止,这是我在index.js文件中的代码。我通过命令终端中的节点index.js运行它。

const express = require("express");
const app = express();

const port = 2222;

app.get("/", function(req, resp){
resp.end("welcome to my app");
});

app.get("/:data", function(req, resp){


var accountSid = 'accountSid'
var authToken = 'authtoken'

var client = require('twilio')(accountSid, authToken);

client.calls.create({
url: 'https://demo.twilio.com/welcome/voice/',
to: req.params.data,
from: '6043302056',
},  function(err, call) {
if(err) {
    console.log(err);
} else {
    console.log(call.sid);
}

})


console.log(req.params.data);
if(req.params.data == "me"){
    resp.end("hi raj");


    //resp.sendFile(__dirname+"/public/index.html)
} else {
    resp.end("Now calling: "+req.params.data);
}
});

app.listen(port, function(err){
if(err){
    console.log("error starting "+err);
    return false;
}

console.log("port is running. "+port);
})

2 个答案:

答案 0 :(得分:0)

Twilio开发者传道者在这里。

你最想要的就是你想要实现的目标。您绝对可以创建一个表单,该表单将接收用户的输入并拨打他们输入的号码。

首先,您需要更新路线,因为您通过表单发送的号码不会成为路径的一部分,而是作为请求正文的一部分。要在express中读取请求主体,您需要body-parser模块。因此,使用以下命令在项目中安装:

npm install body-parser --save

然后将其包含在您的文件中并与您的应用一起使用:

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));

现在,表单通常POST他们的数据,而不是通过GET工作,所以让我们更新你的路由以接收POST请求并从请求中提取数字:

app.post("/calls", function(req, resp) {
  const accountSid = 'accountSid'
  const authToken = 'authtoken'
  const client = require('twilio')(accountSid, authToken);

  const number = req.body.number;

  client.calls.create({
    url: 'https://demo.twilio.com/welcome/voice/',
    to: number,
    from: '6043302056',
  },  function(err, call) {
    if(err) {
      console.error(err);
    } else {
      console.log(call.sid);
    }
  })

  console.log(number);
  if(req.params.data == "me"){
    resp.end("hi raj");
    //resp.sendFile(__dirname+"/public/index.html)
  } else {
    resp.end("Now calling: " + number);
  }
});

现在,您需要一个HTML文件,其中包含一个表单以向此端点发出请求。创建一个名为index.html的HTML文件,并将其放在应用程序中名为public的新文件夹中。

您可以使用此行从Express中的public目录加载静态文件,在创建app之后将其添加到顶部附近:

const path = require('path');
app.use('/static', express.static(path.join(__dirname, 'public')));

最后我们只需要HTML。这是我能编写的最简单的HTML,可以满足您的需求:

<!DOCTYPE html>
<html>
<head>
  <title>Make a call</title>
</head>
<body>
  <form action="/" method="POST">
    <label for="number">What number do you want to call?</label>
    <input id="number" type="tel" />
    <button type="submit">Make call</button>
  </form>
</body>
</html>

正如您所看到的,它只是一个带有单个输入的表单,数字和提交它的按钮。

全力以赴,让我知道你是如何继续下去的。

答案 1 :(得分:-1)

是的,

首先:你可以这样做,但你需要在HTML文件中编写代码或者至少在html文件中包含这些代码,并在单击相应的按钮后调用Twilo的函数。首先,在用户输入地址后,在该HTML页面上呈现HTML页面,输入编号和立即调用按钮功能。在用户点击按钮后,执行:

function callNow() {
var num = document.getElementById('number').value;

  client.calls.create({
    url: 'https://demo.twilio.com/welcome/voice/',
    to: num,
    from: '6043302056',
  },  function(err, call) {
  if(err) {
     console.log(err);
  } else {
     console.log(call.sid);
  }
{

您的HTML代码应为:

<input id="number">
<button onclick="callNow()">Call Now</button>

您可以添加twilio cdn并使用此功能。我只是给你这个概念,我希望你会发现这有用。