13 |

14 |

15 |

16 |

17 | ) 18 | } 19 | } 20 | 21 | class Messages extends React.Component { 22 | constructor(props) { 23 | super(props); 24 | 25 | this.state = { 26 | data: props.data, 27 | room: props.room 28 | } 29 | } 30 | 31 | scroll() { 32 | var el = document.getElementById('messages'); 33 | window.scrollTo(0, el.scrollHeight); 34 | } 35 | 36 | componentDidMount() { 37 | var evtSource = new EventSource(`/rooms/${this.state.room.id}/stream`); 38 | evtSource.addEventListener('message', evt => { 39 | var msg = JSON.parse(evt.data); 40 | 41 | if (msg.operation === 'create') { 42 | this.state.data.shift(); 43 | this.setState({ 44 | date: this.state.data.push(msg.model) 45 | }) 46 | }; 47 | }); 48 | 49 | this.scroll(); 50 | } 51 | 52 | componentDidUpdate() { 53 | this.scroll(); 54 | } 55 | 56 | render() { 57 | var messageNodes = this.state.data.map(function(msg, index) { 58 | return ( 59 | 60 | ); 61 | }); 62 | return ( 63 |

64 | {messageNodes} 65 |

66 | ) 67 | } 68 | } 69 | 70 | module.exports = Messages; 71 | -------------------------------------------------------------------------------- /public/components/nav.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react/addons'); 4 | 5 | class RosterItem extends React.Component { 6 | render() { 7 | return ( 8 |

9 | {this.props.room.uri} 10 |

11 | ) 12 | } 13 | } 14 | 15 | class Roster extends React.Component { 16 | constructor(props) { 17 | super(props); 18 | 19 | this.state = { 20 | menu: 'hidden-menu', 21 | }; 22 | } 23 | 24 | showMenu(evt) { 25 | evt.stopPropagation(); 26 | evt.preventDefault(); 27 | 28 | this.setState({ 29 | menu: 'visible-menu', 30 | }); 31 | } 32 | 33 | hideMenu() { 34 | this.setState({ 35 | menu: 'hidden-menu', 36 | }); 37 | } 38 | 39 | render() { 40 | var rosterItems = this.props.rooms.map( (room, index) => { 41 | return ( 42 | 43 | ); 44 | }); 45 | return ( 46 |

47 | 48 |

49 | {rosterItems} 50 |

51 |

52 | ) 53 | } 54 | } 55 | 56 | class Nav extends React.Component { 57 | render() { 58 | return ( 59 |

60 |

{this.props.room.uri}

61 | 62 |

63 | ) 64 | } 65 | } 66 | 67 | module.exports = Nav; 68 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/malditogeek/gitter-react/99662bcb2f1e9c60d65467f438c5773733d7eb20/public/favicon.ico -------------------------------------------------------------------------------- /public/main.jsx: -------------------------------------------------------------------------------- 1 | require('./app.less'); 2 | require('./reset.css'); 3 | 4 | var React = require('react/addons'); 5 | var ReactApp = React.createFactory(require('./components/app')); 6 | 7 | var mountNode = document.getElementById('react-app'); 8 | React.render(new ReactApp({seed: window.seed}), mountNode); 9 | -------------------------------------------------------------------------------- /public/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; 43 | } 44 | -------------------------------------------------------------------------------- /router/home.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _ = require('underscore'); 4 | var Gitter = require('../lib/gitter'); 5 | 6 | var home = (req, res) => { 7 | if (!req.session.token) return res.render('login'); 8 | 9 | var gitter = new Gitter(req.session.token); 10 | gitter.get('/v1/rooms') 11 | .then( (_rooms) => { 12 | var allRooms = _rooms.filter( r => r.lastAccessTime ); 13 | var sortedRooms = _.sortBy(allRooms, 'lastAccessTime').reverse(); 14 | var people = sortedRooms.filter( r => r.oneToOne ).slice(0,10); 15 | var rooms = sortedRooms.filter( r => !r.oneToOne ).slice(0,10); 16 | 17 | res.redirect(`/rooms/${rooms[0].id}`); 18 | }) 19 | .catch( err => { 20 | console.log('ERR', err); 21 | res.status(500).send('Something went wrong'); 22 | }); 23 | }; 24 | 25 | module.exports = home; 26 | -------------------------------------------------------------------------------- /router/msg-stream.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var fayeWrapper = require('../lib/faye'); 4 | 5 | var stream = (req, res) => { 6 | res.writeHead(200, { 7 | 'Content-Type': 'text/event-stream', 8 | 'Cache-Control': 'no-cache', 9 | 'Connection': 'keep-alive', 10 | 'Access-Control-Allow-Origin': '*' 11 | }); 12 | 13 | // Heartbeat 14 | var nln = () => res.write('\n'); 15 | var hbt = setInterval(nln, 15000); 16 | 17 | // Retry 18 | res.write("retry: 500\n"); 19 | 20 | var publish = (msg) => { 21 | res.write(`event: message\n`); 22 | res.write(`data: ${JSON.stringify(msg)}\n\n`); 23 | res.flush(); 24 | }; 25 | 26 | var roomId= req.params.roomId; 27 | var faye = new fayeWrapper(req.session.token); 28 | faye.client.subscribe(`/api/v1/rooms/${roomId}/chatMessages`, publish); 29 | 30 | // Clear heartbeat and listener 31 | req.on('close', () => { 32 | clearInterval(hbt); 33 | faye.client.disconnect(); 34 | }); 35 | }; 36 | 37 | module.exports = stream; 38 | -------------------------------------------------------------------------------- /router/oauth.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var express = require('express'); 4 | var OAuth2 = require('oauth').OAuth2; 5 | 6 | var OAUTH_KEY = process.env.OAUTH_KEY; 7 | var OAUTH_SECRET = process.env.OAUTH_SECRET; 8 | var BASEPATH = 'https://gitter.im/'; 9 | var REDIRECT = process.env.REDIRECT; 10 | 11 | var auth = new OAuth2(OAUTH_KEY, OAUTH_SECRET, BASEPATH, 'login/oauth/authorize', 'login/oauth/token'); 12 | 13 | var login = (req, res) => { 14 | var url = auth.getAuthorizeUrl({ 15 | redirect_uri: REDIRECT, 16 | response_type: 'code' 17 | }); 18 | res.redirect(url); 19 | }; 20 | 21 | var callback = (req, res) => { 22 | var code = req.query.code; 23 | var params = { 24 | redirect_uri: REDIRECT, 25 | grant_type: 'authorization_code' 26 | }; 27 | 28 | auth.getOAuthAccessToken(code, params, (err, access_token) => { 29 | req.session.token = access_token; 30 | res.redirect('/'); 31 | }); 32 | }; 33 | 34 | var logout = (req, res) => { 35 | req.session.destroy(); 36 | res.redirect('/'); 37 | }; 38 | 39 | var app = express(); 40 | 41 | app.get('/login', login); 42 | app.get('/callback', callback); 43 | app.get('/logout', logout); 44 | 45 | module.exports = app; 46 | -------------------------------------------------------------------------------- /router/render-room.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _ = require('underscore'); 4 | var React = require('react/addons'); 5 | var ReactApp = React.createFactory(require('../public/components/app')); 6 | 7 | var Gitter = require('../lib/gitter'); 8 | 9 | var room = (req, res) => { 10 | var gitter = new Gitter(req.session.token); 11 | 12 | return Promise.all([ 13 | gitter.get(`/v1/rooms/${req.params.roomId}`, {limit: 50}), 14 | gitter.get(`/v1/rooms/${req.params.roomId}/chatMessages`, {limit: 50}), 15 | gitter.get(`/v1/rooms`) 16 | ]) 17 | .then( values => { 18 | let [room, chatMessages, _rooms] = values; 19 | 20 | var allRooms = _rooms.filter( r => r.lastAccessTime ); 21 | var sortedRooms = _.sortBy(allRooms, 'lastAccessTime').reverse(); 22 | var people = sortedRooms.filter( r => r.oneToOne ).slice(0,10); 23 | var rooms = sortedRooms.filter( r => !r.oneToOne ).slice(0,10); 24 | 25 | var seed = { 26 | room: room, 27 | data: chatMessages, 28 | people: people, 29 | rooms: rooms 30 | }; 31 | 32 | var reactHTML = React.renderToString(new ReactApp({seed: seed})); 33 | res.render('index.ejs', {reactHTML: reactHTML, seed: JSON.stringify(seed)}); 34 | }) 35 | .catch( err => { 36 | console.log('ERR', err); 37 | res.status(500).send('Something went wrong'); 38 | }); 39 | }; 40 | 41 | module.exports = room; 42 | -------------------------------------------------------------------------------- /router/send.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var Gitter = require('../lib/gitter'); 4 | 5 | var send = (req, res) => { 6 | if (!req.session.token) return res.redirect('/'); 7 | 8 | var room = req.body.room; 9 | var text = req.body.text; 10 | 11 | var gitter = new Gitter(req.session.token); 12 | gitter.post(`/v1/rooms/${room}/chatMessages`, {}, {text: text}) 13 | .then( (msg) => { 14 | res.status(200).send(msg); 15 | }) 16 | .catch( err => { 17 | console.log('ERR', err); 18 | res.status(500).send('Something went wrong'); 19 | }); 20 | }; 21 | 22 | module.exports = send; 23 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | require('babel/register')({extensions: ['.js', '.jsx']}); 4 | 5 | var express = require('express'); 6 | var bodyParser = require('body-parser'); 7 | var serve_static = require('serve-static'); 8 | var compression = require('compression'); 9 | var session = require('cookie-session'); 10 | 11 | var app = express(); 12 | app.use(compression()); 13 | app.use(bodyParser.json()); 14 | app.use(bodyParser.urlencoded({extended: true})); 15 | app.set('view engine', 'ejs'); 16 | app.use(serve_static('public')); 17 | app.disable('x-powered-by'); 18 | app.use(session({secret: process.env.SESSION_SECRET})); 19 | 20 | app.get('/', require('./router/home')); 21 | app.use('/oauth', require('./router/oauth')); 22 | app.post('/send', require('./router/send')); 23 | app.get('/rooms/:roomId', require('./router/render-room')); 24 | app.get('/rooms/:roomId/stream', require('./router/msg-stream')); 25 | 26 | var port = process.env.PORT || 4321; 27 | app.listen(port, function() { 28 | console.log('Ready: http://localhost:' + port); 29 | }); 30 | -------------------------------------------------------------------------------- /views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | Gitter 4 | 5 | 6 | 7 | 8 | 9 | 10 |

<%- reactHTML %>

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /views/login.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | Gitter 4 | 5 | 6 | 7 | 8 | 9 | Login