├── .gitignore ├── public ├── images │ ├── icon-nexmo.png │ ├── nexmo-white.png │ └── nexmo-sms-notification-demo.gif ├── css │ └── style.css └── js │ └── app.js ├── package.json ├── README.md ├── views └── index.html └── server └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | config.js 4 | temp.js 5 | persist 6 | -------------------------------------------------------------------------------- /public/images/icon-nexmo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexmo-community/send-sms-nodejs/HEAD/public/images/icon-nexmo.png -------------------------------------------------------------------------------- /public/images/nexmo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexmo-community/send-sms-nodejs/HEAD/public/images/nexmo-white.png -------------------------------------------------------------------------------- /public/images/nexmo-sms-notification-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexmo-community/send-sms-nodejs/HEAD/public/images/nexmo-sms-notification-demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nexmo-sms-demo", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Tomomi ❤ Imura", 10 | "license": "MIT", 11 | "dependencies": { 12 | "body-parser": "^1.15.2", 13 | "ejs": "^2.5.1", 14 | "express": "^4.14.0", 15 | "nexmo": "^1.0.0-beta-7", 16 | "socket.io": "^1.4.8" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sending SMS from Web 2 | 3 | This is a simple web app written in Node.js with Express. 4 | Additionally, I am using W3C Web Notifications API for the front-end UI to show the SMS receipt message with Socket.io. 5 | 6 | ![screencast](public/images/nexmo-sms-notification-demo.gif) 7 | 8 | ## Running This Demo Locally on Your Machine 9 | 10 | ### 1. Install dependencies 11 | 12 | ```bash 13 | $ npm install 14 | ``` 15 | 16 | ### 2. Set up a config.js with Your Credentials 17 | 18 | Sign up at [Nexmo](https://nexmo.com) to get your own API keys and a virtual number. 19 | 20 | Create `config.js` in `/server`. The file should include the credentials. 21 | 22 | ```javascript 23 | module.exports = { 24 | api_key: 'f321a...', 25 | api_secret: '18e9aad...', 26 | number: '14155551234' 27 | }; 28 | ``` 29 | 30 | ### 3. Run the Node App 31 | 32 | ```bash 33 | $ node server/index.js 34 | ``` 35 | 36 | ### 4. Launch it on Browser 37 | 38 | Go to [http://localhost:4000](http://localhost:4000) and send text messages. 39 | -------------------------------------------------------------------------------- /views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Nexmo SMS Web App Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 |

Text Anybody

20 |

21 |

22 | 23 |

24 |

Enter a number, begins with a country code

25 | 30 |

31 | 32 |

33 | 34 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const config = require('./config'); 4 | const express = require('express'); 5 | const bodyParser = require('body-parser'); 6 | const ejs = require('ejs'); 7 | const Nexmo = require('nexmo'); 8 | const socketio = require('socket.io'); 9 | 10 | const app = express(); 11 | const server = app.listen(4000, () => { 12 | console.log('Express server listening on port %d in %s mode', server.address().port, app.settings.env); 13 | }); 14 | 15 | // Nexmo init 16 | 17 | const nexmo = new Nexmo({ 18 | apiKey: config.api_key, 19 | apiSecret: config.api_secret, 20 | }, {debug: true}); 21 | 22 | // socket.io 23 | 24 | const io = socketio(server); 25 | io.on('connection', (socket) => { 26 | console.log('Socket connected'); 27 | socket.on('disconnect', () => { 28 | console.log('Socket disconnected'); 29 | }); 30 | }); 31 | 32 | // Configure Express 33 | 34 | app.set('views', __dirname + '/../views'); 35 | app.set('view engine', 'html'); 36 | app.engine('html', ejs.renderFile); 37 | app.use(express.static(__dirname + '/../public')); 38 | app.use(bodyParser.json()); 39 | app.use(bodyParser.urlencoded({ extended: true })); 40 | 41 | // Express routes 42 | 43 | app.get('/', (req, res) => { 44 | res.render('index'); 45 | }); 46 | 47 | app.post('/', (req, res) => { 48 | res.send(req.body); 49 | 50 | let toNumber = req.body.number; 51 | let text = req.body.text; 52 | 53 | let data = {}; // the data to be emitted to front-end 54 | 55 | // Sending SMS via Nexmo 56 | nexmo.message.sendSms( 57 | config.number, toNumber, text, {type: 'unicode'}, 58 | (err, responseData) => { 59 | if (err) { 60 | data = {error: err}; 61 | } else { 62 | //console.dir(responseData); 63 | if(responseData.messages[0]['error-text']) { 64 | data = {error: responseData.messages[0]['error-text']}; 65 | } else { 66 | let n = responseData.messages[0]['to'].substr(0, responseData.messages[0]['to'].length - 4) + '****'; 67 | data = {id: responseData.messages[0]['message-id'], number: n}; 68 | } 69 | io.emit('smsStatus', data); 70 | } 71 | } 72 | ); 73 | 74 | // Basic Number Insight - get info about the phone number 75 | nexmo.numberInsight.get({level:'basic', number: toNumber}, (err, responseData) => { 76 | if (err) console.log(err); 77 | else { 78 | console.dir(responseData); 79 | } 80 | }); 81 | 82 | }); 83 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 2 | 3 | html { 4 | height: 100%; 5 | } 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-family: 'Noto Sans', sans-serif; 10 | background: #148dcd; 11 | background-size: cover; 12 | color: #fff; 13 | } 14 | h1, h2, h3 { 15 | margin: 0; 16 | text-rendering: optimizeLegibility; 17 | } 18 | footer { 19 | max-width: 600px; 20 | margin: auto; 21 | text-align: right; 22 | } 23 | footer a { 24 | color: #f7d51b; 25 | } 26 | header { 27 | max-width: 600px; 28 | margin: 2em auto 1em; 29 | color: #fff; 30 | 31 | display: -ms-flexbox; 32 | display: flex; 33 | align-items: flex-end; 34 | justify-content: space-between; 35 | } 36 | header h1 { 37 | font-family: 'Alfa Slab One'; 38 | font-size: 2.4em; 39 | font-weight: normal; 40 | } 41 | header .logo { 42 | width: 120px; 43 | display: block; 44 | } 45 | form { 46 | width: 100%; 47 | display: -ms-flexbox; 48 | display: flex; 49 | align-items: flex-end; 50 | } 51 | input { 52 | -webkit-appearance: none; 53 | -moz-appearance: none; 54 | border: none; 55 | border-radius: 6px; 56 | color: #333; 57 | font-size: 1.1em; 58 | padding: .75em 1em; 59 | margin-bottom: 1em; 60 | } 61 | input:not(:last-of-type) { 62 | margin-right: 0.5em; 63 | } 64 | input[type=tel] { 65 | width: 170px; 66 | } 67 | input[type=text] { 68 | flex-grow: 1; 69 | } 70 | input[type=button] { 71 | background: #e6e6e6; 72 | text-shadow: 0 1px 0 #f3f3f3; 73 | } 74 | input[type=button]:active { 75 | background: #bfbfbf; 76 | position: relative; 77 | top: 2px; 78 | left: 1px; 79 | } 80 | #main { 81 | max-width: 600px; 82 | margin: 1em auto 2em; 83 | padding: 1em 1.5em 1.5em; 84 | border-radius: 12px; 85 | background: rgba(0, 0, 0, 0.25); 86 | box-shadow: 3px 7px 10px rgba(0, 0, 0, 0.5); 87 | } 88 | .intro { 89 | position: relative; 90 | padding: 0 0.75em; 91 | background: #148dcd; 92 | line-height: 46px; 93 | border-radius: 6px; 94 | display: inline-block; 95 | margin-bottom: 2em; 96 | box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.25); 97 | } 98 | .intro:before { 99 | content: ' '; 100 | position: absolute; 101 | width: 0; 102 | height: 0; 103 | left: 50px; 104 | top: 46px; 105 | border: 10px solid; 106 | border-color: #148dcd transparent transparent #148dcd; 107 | } 108 | .response { 109 | color: #f7d51b; 110 | font-style: italic; 111 | max-width: 600px; 112 | margin: 1em auto 2em; 113 | } 114 | section[section] { 115 | display: none; /* for IE < 11 */ 116 | } 117 | .poof { 118 | animation: poof 15s ease-in 0s 1; 119 | } 120 | @keyframes poof { 121 | from { 122 | opacity: 1; 123 | } 124 | to { 125 | opacity: 0; 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /public/js/app.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | // DOM 5 | var numberField = document.querySelector('input[name=number]'); 6 | var textField = document.querySelector('input[name=text]'); 7 | var button = document.querySelector('input[type=button]'); 8 | var msg = document.querySelector('.response'); 9 | 10 | // Web Notification permission 11 | var permission = 'denied'; 12 | 13 | try { 14 | Notification.requestPermission().then(function(status) { 15 | permission = status; 16 | console.log('Web notification status: '+ permission); 17 | }); 18 | } catch (error) { // Safari 9 doesn't return a promise for requestPermissions 19 | Notification.requestPermission(function(status) { 20 | permission = status; 21 | console.log('Web notification status: '+ permission); 22 | }); 23 | } 24 | 25 | // socket.io 26 | var socket = io(); 27 | socket.on('connect', function() { 28 | console.log('Socket connected'); 29 | }); 30 | socket.on('smsStatus', function(data) { 31 | console.log(data); 32 | if(!data) return; 33 | if(data.error){ 34 | displayStatus('Error: ' + data.error, permission); 35 | } else { 36 | displayStatus('Message ID ' + data.id + ' successfully sent to ' + data.number, permission); 37 | } 38 | }); 39 | 40 | var lastNumber = localStorage.getItem('number'); 41 | if(lastNumber) { 42 | numberField.value = lastNumber; 43 | } 44 | 45 | // UI Events 46 | textField.addEventListener('keyup', function(e) { 47 | (e.keyCode || e.charCode) === 13 && send() 48 | }, false); 49 | button.addEventListener('click', send, false); 50 | 51 | // Send data to server to send a SMS via Nexmo 52 | function send() { 53 | var number = numberField.value.replace(/\D/g,''); // Remove all non-numeric chars 54 | if (!number) return; 55 | 56 | var text = textField.value || 'Hello!'; 57 | 58 | localStorage.setItem('number', number); 59 | 60 | if(!self.fetch) { 61 | alert("Bummer, your browser doesn't support Fetch API!"); 62 | return; 63 | // Ideally, use XHR as the fallback for fetch. 64 | } 65 | 66 | fetch('/', { 67 | method: 'post', 68 | headers: { 69 | 'Content-Type': 'application/json' 70 | }, 71 | body: JSON.stringify({ 72 | number: number, 73 | text: text 74 | }) 75 | }).then(function(response) { 76 | if(response.status !== 200) { 77 | displayStatus(statusText, notification); 78 | } 79 | textField.value = ''; 80 | }).catch(function(e) { 81 | displayStatus(e, notification); 82 | }); 83 | } 84 | 85 | function displayStatus(message, notification) { 86 | console.log(notification); 87 | 88 | if(notification === 'granted') { // web notification 89 | var notification = new Notification('Nexmo', { 90 | body: message, 91 | icon: 'images/icon-nexmo.png' 92 | }); 93 | } else { // Notification is denied by a user. just show text 94 | msg.classList.add('poof'); 95 | msg.textContent = message; 96 | msg.addEventListener('animationend', function(){ 97 | msg.textContent = ''; 98 | msg.classList.remove('poof'); 99 | }, false); 100 | } 101 | } 102 | 103 | })(); 104 | --------------------------------------------------------------------------------