Master ¡Informa-que ¡-‑ ¡Université ¡Paris-‑Sud ¡ 1/15/14 ¡ Javascript ¡ • More ¡powerful ¡than ¡you ¡think ¡ Some ¡tools ¡for ¡building ¡ ¡ • Func-onal: ¡func-ons ¡are ¡first-‑class ¡objects ¡ § func%on ¡map(a, ¡f) ¡{ ¡ web-‑based ¡groupware ¡ ¡ ¡ ¡ ¡ ¡ var ¡sum ¡= ¡0; ¡ ¡ ¡ ¡ ¡ ¡ for ¡(var ¡i ¡= ¡0; ¡i ¡< ¡a.length; ¡i++) ¡ Michel ¡Beaudouin-‑Lafon ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡sum ¡+= ¡f(a[i]); ¡ mbl@lri.fr ¡ ¡ ¡ ¡ ¡ ¡ return ¡sum; ¡ } ¡ § map([1, ¡2, ¡3], ¡ func%on (x) ¡{ ¡ return ¡x*x ¡}); ¡// ¡14 ¡ Javascript ¡ Javascript ¡ • Object-‑oriented: ¡based ¡on ¡the ¡no-on ¡of ¡ • Func-onal: ¡func-ons ¡are ¡first-‑class ¡objects ¡ prototype ¡instead ¡of ¡the ¡no-on ¡of ¡class ¡ § func%on ¡currify(f, ¡x) ¡{ ¡ § var ¡p ¡= ¡{ ¡ ¡ ¡ ¡ ¡ ¡ return ¡ func%on (y) ¡{ ¡ ¡ ¡ ¡ ¡x: ¡10, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ return ¡f(x, ¡y); ¡ ¡ ¡ ¡ ¡y: ¡25, ¡ ¡ ¡ ¡ ¡ ¡}; ¡ ¡ ¡ ¡ ¡moveBy: ¡ func%on (dx, ¡dy) ¡{ ¡ } ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡this.x ¡+= ¡dx; ¡this.y ¡+= ¡dy ¡ § func%on ¡add(a, ¡b) ¡{ ¡ return ¡a+b; ¡} ¡ ¡ ¡ ¡ ¡} ¡ } ¡ § var ¡add4 ¡= ¡currify(add, ¡4); ¡ § p.moveBy(5, ¡10); ¡ ¡// ¡p ¡= ¡{ ¡x: ¡15, ¡y: ¡35, ¡moveBy: ¡…} ¡ § ¡add4(2); ¡// ¡6 ¡ Michel ¡Beaudouin-‑Lafon ¡-‑ ¡CSCW ¡& ¡Groupware ¡ 1 ¡
Master ¡Informa-que ¡-‑ ¡Université ¡Paris-‑Sud ¡ 1/15/14 ¡ Javascript ¡ Javascript ¡ • Each ¡object ¡inherits ¡from ¡its ¡ prototype ¡ • We ¡can ¡re-‑create ¡a ¡class-‑based ¡system ¡ § var ¡protoPoint ¡= ¡{ ¡ § func%on ¡Point() ¡{ ¡ ¡ ¡ ¡ ¡// ¡this ¡is ¡a ¡constructor ¡func-on ¡ ¡ ¡ ¡x: ¡0, ¡y: ¡0, ¡ ¡ ¡ ¡this.x ¡= ¡0; ¡this.y ¡= ¡0 ¡ ¡ ¡ ¡moveBy: ¡ func%on (dx, ¡dy) ¡{ ¡ ¡ ¡ ¡ ¡// ¡also ¡assigns ¡this.prototype ¡ ¡ ¡this.x ¡+= ¡dx; ¡this.y ¡+= ¡dy; ¡ } ¡ ¡ ¡ ¡} ¡ } ¡ § var ¡p ¡= ¡ new ¡Point(); ¡// ¡calls ¡Point ¡with ¡a ¡new ¡object ¡ § var ¡p ¡= ¡{}; ¡p.prototype ¡= ¡protoPoint; ¡ § // ¡this ¡is ¡equivalent ¡to ¡a ¡“method” ¡of ¡“class” ¡Point ¡ // ¡note ¡: ¡the ¡above ¡does ¡NOT ¡work ¡– ¡see ¡next ¡slide ¡ Point.prototype.moveBy ¡= ¡ func%on (dx, ¡dy) ¡{ ¡ // ¡(a ¡constructor ¡is ¡the ¡only ¡way ¡to ¡define ¡a ¡prototype) ¡ ¡this.x ¡+= ¡dx; ¡this.y ¡+= ¡dy; ¡ § p.x; ¡ ¡ ¡ ¡// ¡0 ¡(from ¡the ¡prototype) ¡ } ¡ ¡ p.x ¡= ¡10; ¡ ¡// ¡x ¡is ¡now ¡a ¡property ¡of ¡p ¡ § p.moveBy(5, ¡10); ¡ ¡ ¡// ¡p ¡= ¡{x:5, ¡y:10}; ¡ p.moveBy(5, ¡10); ¡ ¡// ¡p ¡= ¡{x: ¡15, ¡y: ¡10} ¡ Node.js ¡ Node.js ¡ • Node ¡implements ¡a ¡reac-ve ¡programming ¡ ¡ • Use ¡javascript ¡to ¡program ¡web ¡app ¡servers ¡ model ¡based ¡on ¡events ¡and ¡event ¡handlers ¡ • Module ¡system ¡ • Asynchronous ¡event ¡handling ¡ – Modules ¡are ¡installed ¡with ¡npm, ¡ ¡ § var ¡Emioer ¡= ¡require('events').EventEmioer; ¡ the ¡Node ¡Package ¡Manager: ¡npm ¡install ¡<package> ¡ var ¡chatRoom ¡= ¡new ¡Emioer(), ¡par-cipants ¡= ¡[]; ¡ – Packages ¡can ¡be ¡local ¡or ¡global ¡(npm ¡–g) ¡ § chatRoom.on('hello', ¡ func%on (name) ¡{ ¡ ¡ ¡ ¡ ¡console.log(name, ¡'says ¡Hi!'); ¡ ¡ – A ¡package ¡is ¡imported ¡with ¡require: ¡ }); ¡ ¡ ¡ ¡ ¡ var ¡fs ¡= ¡require('fs'); ¡ § chatRoom.on('hello', ¡ func%on (name) ¡{ ¡ ¡ ¡ ¡ ¡fs.fileExists(…) ¡ ¡ ¡ ¡ ¡par-cipants.push(name); ¡ ¡ }); ¡ – Node ¡has ¡built-‑in ¡modules ¡to ¡access ¡the ¡OS: ¡ ¡file ¡system, ¡processes, ¡HTTP ¡protocol, ¡… ¡ § chatRoom.emit('hello', ¡'Alice'); ¡ Michel ¡Beaudouin-‑Lafon ¡-‑ ¡CSCW ¡& ¡Groupware ¡ 2 ¡
Master ¡Informa-que ¡-‑ ¡Université ¡Paris-‑Sud ¡ 1/15/14 ¡ Node.js ¡ Node.js ¡– ¡Express ¡HTTP ¡server ¡ • Using ¡con-nua-ons ¡(or ¡callbacks) ¡ ¡ • Basis ¡of ¡many ¡web ¡applica-ons ¡ to ¡program ¡in ¡an ¡asynchronous ¡world ¡ § var ¡express ¡= ¡require('express'), ¡ – Many ¡node ¡modules ¡use ¡callbacks, ¡which ¡are ¡called ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡app ¡= ¡express.createServer(); ¡ when ¡the ¡task ¡is ¡actually ¡performed: ¡ app.get('/', ¡ func%on (request, ¡response) ¡{ ¡ § var ¡fs ¡= ¡require('fs'); ¡ ¡ ¡ ¡ ¡response.send('Hello ¡World'); ¡ var ¡s ¡= ¡fs.open('myFile', ¡'w'); ¡ }); ¡ if ¡(s) ¡s.write('Hello'); ¡ ¡// ¡wrong: ¡file ¡not ¡opened ¡yet! ¡ app.listen(8080); ¡ § fs.open('myFile', ¡'w', ¡ func%on ¡(err, ¡fd) ¡{ ¡ § // ¡serve ¡sta-c ¡files ¡ ¡ ¡ ¡ if ¡(! ¡err) ¡fs.write(fd, ¡'Hello', ¡ func%on (err) ¡{ ¡…}); ¡ app.use(express.sta-c(__dirname ¡+ ¡'/public')); ¡ }); ¡ Node.js ¡– ¡socket.io ¡ Node.js ¡– ¡socket.io ¡ • Communica-on ¡between ¡web ¡page ¡and ¡server ¡ • Client ¡(web ¡page) ¡ • Server ¡: ¡ – <script> ¡ var ¡server ¡= ¡io.connect(); ¡ – var ¡io ¡= ¡require('socket.io').listen(80); ¡ server.on('connect', ¡ func%on ¡() ¡{ ¡ io.sockets.on('connec-on', ¡ func%on ¡(client) ¡{ ¡ ¡ ¡server.emit('msg', ¡'Hello'); ¡ ¡ ¡ ¡ ¡client.on('msg', ¡ func%on ¡(data) ¡{ ¡ }); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡// ¡send ¡to ¡all ¡other ¡clients ¡ server.on('msg', ¡ func%on (data) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡client.broadcast.emit('msg', ¡data); ¡ ¡ ¡ ¡ ¡$('#chat').append(data); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ }); ¡ }); ¡ </script> ¡ Michel ¡Beaudouin-‑Lafon ¡-‑ ¡CSCW ¡& ¡Groupware ¡ 3 ¡
Master ¡Informa-que ¡-‑ ¡Université ¡Paris-‑Sud ¡ 1/15/14 ¡ Node.js ¡-‑ ¡sharejs ¡ dnode ¡ • Shared ¡text ¡strings ¡and ¡objects ¡synchronized ¡ • Remote ¡func-on ¡call ¡for ¡node.js ¡and ¡browser ¡ through ¡opera-onal ¡transforma-on ¡ (experimental) ¡ • Server: ¡ § var ¡client ¡= ¡require('share').client; ¡ § var ¡dnode ¡ = ¡require('dnode'); ¡ client.open('myDoc', ¡'text', ¡url, ¡ func%on (err, ¡doc) ¡{ ¡ var ¡server ¡ = ¡dnode({ ¡ ¡ ¡ ¡ ¡doc.insert('Hello ¡world', ¡0); ¡ ¡ ¡ ¡ ¡transform : ¡ func%on ¡(s, ¡cb) ¡{ ¡ ¡ ¡ ¡ ¡doc.on('change', ¡ func%on (op) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡cb(s.replace(/[aeiou]{2,}/,'oo').toUpperCase()) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡console.log(doc.snapshot); ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡}); ¡ }); ¡ }); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ § server.listen(5004); ¡ dnode ¡ Node-‑webkit ¡ • Client: ¡ • Combines ¡a ¡node.js ¡server ¡and ¡a ¡web ¡browser ¡ § var ¡dnode ¡ = ¡require('dnode'); ¡ • Access ¡to ¡desktop: ¡files, ¡menus, ¡… ¡ var ¡d ¡ = ¡dnode.connect(5004); ¡ • Desktop-‑based ¡web ¡applica-ons ¡ § d.on('remote', ¡ func%on ¡(remote) ¡{ ¡ ¡ ¡ ¡ ¡remote.transform('beep', ¡ func%on ¡(res) ¡{ ¡ • Avoids ¡web ¡protocol ¡issues ¡(same-‑origin, ¡…) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡console.log('beep ¡=> ¡' ¡ + ¡res); ¡ • Global ¡namespace ¡shared ¡between ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡d.end(); ¡ node ¡server ¡and ¡every ¡web ¡window ¡ ¡ ¡ ¡ ¡ ¡}); ¡ }); ¡ § $ ¡node ¡server.js ¡& ¡ $ ¡node ¡client.js ¡ beep ¡=> ¡BOOP ¡ Michel ¡Beaudouin-‑Lafon ¡-‑ ¡CSCW ¡& ¡Groupware ¡ 4 ¡
Recommend
More recommend
