22 |
45 |
23 |
24 |
33 |
34 |
35 |
44 | -
25 |
- 26 | 27 | 28 |
Hootsuite Component Sample
32 |
46 |
87 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const express = require('express');
3 | const https = require('https');
4 | const http = require('http');
5 | const fs = require('fs');
6 | const bodyParser = require('body-parser');
7 | const sha512 = require('js-sha512');
8 | var Twitter = require('twit');
9 |
10 | const app = express();
11 |
12 | // create application/json parser
13 | const jsonParser = bodyParser.json();
14 | // create application/x-www-form-urlencoded parser
15 | const urlencodedParser = bodyParser.urlencoded({ extended: true });
16 |
17 | app.use(jsonParser);
18 | app.use(urlencodedParser);
19 |
20 | var secret = '';
21 |
22 | //--- Client for hydrating twitter data - ADD YOUR OWN CREDENTIALS ---
23 | //--- Otherwise, app will not show up in plugin list ---
24 | try {
25 | var twitterClient = new Twitter({
26 | consumer_key: process.env.TWITTER_CONSUMER_KEY,
27 | consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
28 | access_token: process.env.TWITTER_ACCESS_TOKEN,
29 | access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET
30 | });
31 | } catch(error) {
32 | console.log('No Twitter API credenitals found');
33 | }
34 |
35 | function sleep(ms) {
36 | return new Promise(resolve => setTimeout(resolve, ms));
37 | }
38 |
39 | async function sendFakeMessages(socket) {
40 | // emit a scripted set of messages
41 | await sleep(2000);
42 | socket.emit('stream update', 'hello!');
43 | await sleep(2000);
44 | socket.emit('stream update', 'hey, how are you?');
45 | await sleep(2000);
46 | socket.emit('stream update', 'i\'m good thanks, how are you?');
47 | await sleep(2000);
48 | socket.emit('stream update', 'i\'m good too');
49 | }
50 |
51 | // See "Configuring your Shared Secret" section in README.md
52 | try {
53 | secret = process.env.SHARED_SECRET;
54 | } catch (err) {
55 | console.log('SHARED_SECRET is missing from .env');
56 | }
57 |
58 | app.get('/gen-token', (req, res) => {
59 | // Combines information to create an auth token
60 | // Auth token is retrieved by an AJAX request from stream.js
61 | if (secret === '') {
62 | console.log('Token generation failed because of missing shared secret');
63 | res.status(500).send({error: 'Token generation failed because of missing shared secret'});
64 | } else {
65 | res.send(sha512(req.query.userId.toString() +
66 | req.query.timestamp.toString() +
67 | req.query.url.toString() + secret));
68 | }
69 | });
70 |
71 | app.post('/stream', (req, res) => {
72 | res.sendFile(__dirname + '/stream.html');
73 | });
74 |
75 | app.get('/stream', (req, res) => {
76 | res.sendFile(__dirname + '/stream.html');
77 | });
78 |
79 | app.use('/assets', express.static('assets'));
80 |
81 | app.post('/plugin', (req, res) => {
82 | res.sendFile(__dirname + '/plugin.html');
83 | });
84 |
85 | app.get('/plugin', (req, res) => {
86 | res.sendFile(__dirname + '/plugin.html');
87 | });
88 |
89 | app.get('/modal', (req, res) => {
90 | res.sendFile(__dirname + '/modal.html');
91 | });
92 |
93 | app.post('/webhooks', (req, res) => {
94 | console.log("Webhook content:\n\n%s", JSON.stringify(req.body));
95 | res.status(200).end();
96 | });
97 |
98 | //used for webhooks with urlencoded payloads
99 | app.post('/callbacks', (req, res) => {
100 | console.log("Callback content");
101 | console.log(req.body);
102 |
103 | res.status(200).send('{"success":true}').end();
104 | });
105 |
106 | // GET /twitterAccounts?account_ids=
47 | ![Avatar]()
48 |
49 |
50 |
74 |
77 |
80 |
83 |
86 |
21 |
138 |
22 |
23 |
35 |
36 |
37 |
46 |
137 | -
24 |
- 25 | SDK Functions 26 | 27 |
- 28 | 29 | 30 |
Hootsuite Component Sample
34 |
139 |
42 | var randomString = '';
43 | var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
44 | for (var i = 0; i < 16; i++) {
45 | randomString += possible.charAt(Math.floor(Math.random() * possible.length));
46 | }
47 |
48 | hsp.assignItem({
49 | messageId: randomString,
50 | messageAuthor: getSingleElementByClassName('hs_assignMessageAuthor').value,
51 | messageAuthorAvatar: getSingleElementByClassName('hs_assignMessageAuthorAvatar').value,
52 | message: getSingleElementByClassName('hs_assignMessage').value
53 | });
54 | });
55 |
56 | getSingleElementByClassName('hs_attachFile').addEventListener('click', function () {
57 | hsp.getMemberInfo(function (data) {
58 | var timestamp = Math.floor(Date.now() / 1000);
59 | var url = getSingleElementByClassName('hs_attachFileInput').value;
60 | var extension = url.split('.');
61 | if (extension.length !== 0) {
62 | extension = extension[extension.length - 1];
63 | } else {
64 | extension = 'jpg';
65 | }
66 | var name = getSingleElementByClassName('hs_attachFileImageName').value;
67 | var httpRequest = new XMLHttpRequest();
68 | var once = false;
69 | // generates a token on the backend because secret must be kept on backend
70 | httpRequest.open( 'GET',
71 | window.location.origin +
72 | '/gen-token?userId=' + encodeURIComponent(data.userId) +
73 | '×tamp=' + encodeURIComponent(timestamp) +
74 | '&url=' + encodeURIComponent(url));
75 | httpRequest.send();
76 | httpRequest.onreadystatechange = function () {
77 | if (httpRequest.responseText !== '' && !once) {
78 | hsp.attachFileToMessage({
79 | url: url,
80 | name: name,
81 | extension: extension,
82 | timestamp: timestamp,
83 | token: httpRequest.responseText
84 | });
85 | once = true;
86 | }
87 | };
88 | });
89 | });
90 |
91 | getSingleElementByClassName('hs_updatePlacementSubtitle').addEventListener('click', function () {
92 | hsp.updatePlacementSubtitle(getSingleElementByClassName('hs_updatePlacementSubtitleInput').value);
93 | });
94 |
95 | getSingleElementByClassName('hs_getTwitterAccounts').addEventListener('click', function () {
96 | hsp.getTwitterAccounts(function (data) {
97 | var httpRequest = new XMLHttpRequest();
98 | httpRequest.open(
99 | 'GET',
100 | window.location.origin + '/twitterAccounts?accountIds=' + data.join()
101 | );
102 | httpRequest.setRequestHeader('secretKey', 'super_secret')
103 | httpRequest.send();
104 | httpRequest.onreadystatechange = function() {
105 | replaceTextInClass('hs_getTwitterAccountsOutput', httpRequest.responseText);
106 | }
107 | });
108 | });
109 |
110 | getSingleElementByClassName('hs_retweet').addEventListener('click', function () {
111 | hsp.getTwitterAccounts(function (data) {
112 | var splitURL = getSingleElementByClassName('hs_retweetInput').value.split('/');
113 | var id = splitURL[splitURL.length - 1];
114 | hsp.retweet(id, data[0]);
115 | });
116 | });
117 |
118 | getSingleElementByClassName('hs_showFollowDialog').addEventListener('click', function () {
119 | hsp.showFollowDialog(getSingleElementByClassName('hs_showFollowDialogName').value, true);
120 | });
121 |
122 | getSingleElementByClassName('hs_logout').addEventListener('click', signOut);
123 |
124 | getSingleElementByClassName('hs_showGeolocation').addEventListener('click', function () {
125 | getGeolocation();
126 | });
127 | }
128 |
129 | function loadTopBars() {
130 | var topBarControls = document.getElementsByClassName('hs_topBarControlsBtn');
131 |
132 | Array.prototype.forEach.call(topBarControls, function(topBarControl) {
133 | topBarControl.addEventListener('click', function (event) {
134 | var topBarDropdowns = document.getElementsByClassName('hs_topBarDropdown');
135 | for (var i = 0; i < topBarDropdowns.length; i++) {
136 | if (event.currentTarget.getAttribute('data-dropdown') === topBarDropdowns[i].getAttribute('data-dropdown')) {
137 | if (topBarDropdowns[i].style.display === 'none') {
138 | topBarDropdowns[i].style.display = 'block';
139 | event.currentTarget.classList.add('active');
140 | } else {
141 | topBarDropdowns[i].style.display = 'none';
142 | event.currentTarget.classList.remove('active');
143 | }
144 | } else {
145 | // remove active on all dropdown buttons except the one that was clicked
146 | var topBarBtns = document.getElementsByClassName('hs_topBarControlsBtn');
147 | for (var p = 0; p < topBarBtns.length; p++) {
148 | if (topBarBtns[p].getAttribute('data-dropdown') !== event.currentTarget.getAttribute('data-dropdown')) {
149 | topBarBtns[p].classList.remove('active');
150 | }
151 | }
152 | // close all dropdowns except the one that was clicked
153 | topBarDropdowns[i].style.display = 'none';
154 | }
155 | }
156 | });
157 | });
158 | }
159 |
160 | // for our purposes this is the same thing as jQuery's $(document).ready(...)
161 | document.addEventListener('DOMContentLoaded', function () {
162 | // intializes the Hootsuite JS SDK
163 | hsp.init({
164 | useTheme: true
165 | });
166 |
167 | loadTopBars();
168 | bindApiButtons();
169 | googleAuthInit();
170 |
171 | var socket = io();
172 |
173 | socket.on('stream update', function (msg) {
174 | // inserts incoming messages by copying previous messages and changing contents
175 | var parent = getSingleElementByClassName('hs_messages');
176 | var child = parent.insertBefore(getSingleElementByClassName('hs_message').cloneNode(true), parent.firstChild);
177 | child.getElementsByClassName('hs_postBody')[0].textContent = msg;
178 | });
179 |
180 | hsp.bind('refresh', function () {
181 | // You can do a complex refresh here,
182 | // for example only reload certain parts of your app.
183 | // In this example we'll resend the fake messages that get sent on connection
184 |
185 | var messages = document.getElementsByClassName('hs_message');
186 | // removes all messages except for one to use it as a template for adding more
187 | var initialLength = messages.length;
188 | for (var i = 0; i < initialLength-1; i++) {
189 | messages[0].remove();
190 | }
191 |
192 | // tells the server to re-serve the fake stream updates
193 | socket.emit('restart');
194 | });
195 | });
196 |
--------------------------------------------------------------------------------
140 |
171 |
172 |
173 |
--------------------------------------------------------------------------------
/assets/stream.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function bindApiButtons() {
4 | getSingleElementByClassName('hs_showImagePreview').addEventListener('click', function () {
5 | hsp.showImagePreview(getSingleElementByClassName('hs_showImagePreviewInput').value, 'https://hootsuite.com');
6 | });
7 |
8 | getSingleElementByClassName('hs_showLightbox').addEventListener('click', function () {
9 | // similar to showImagePreview
10 | hsp.showLightbox(getSingleElementByClassName('hs_showLightboxInput').value);
11 | });
12 |
13 | getSingleElementByClassName('hs_showStatusMessage').addEventListener('click', function () {
14 | // type can be info, error, warning or success
15 | hsp.showStatusMessage(getSingleElementByClassName('hs_showStatusMessageInput').value, getSingleElementByClassName('hs_showStatusMessageTypeInput').value);
16 | });
17 |
18 | getSingleElementByClassName('hs_showUser').addEventListener('click', function () {
19 | // opens a modal with info about a twitter user
20 | hsp.showUser(getSingleElementByClassName('hs_showUserInput').value);
21 | });
22 |
23 | getSingleElementByClassName('hs_composeMessage').addEventListener('click', function () {
24 | hsp.composeMessage(getSingleElementByClassName('hs_composeMessageInput').value);
25 | });
26 |
27 | getSingleElementByClassName('hs_saveData').addEventListener('click', function () {
28 | hsp.saveData(getSingleElementByClassName('hs_saveDataInput').value, function(){});
29 | });
30 |
31 | getSingleElementByClassName('hs_getData').addEventListener('click', function () {
32 | hsp.getData(function (data){
33 | replaceTextInClass('hs_getDataOutput', data);
34 | });
35 | });
36 |
37 | getSingleElementByClassName('hs_assignItem').addEventListener('click', function () {
38 | // Generates a 16 character random string to use as the messageId
39 | // because the messageId must be unique or Hootsuite will return a 500 error.
40 | // This can be saved if you'd like to do something using the `sendassignmentupdates` event
41 | // or with the Assignment Event Request API Callback
141 |
170 |
142 | 
143 |
144 |
145 |
169 |
143 |