├── .gitattributes ├── .gitignore ├── .meteor ├── .finished-upgraders ├── .gitignore ├── .id ├── packages ├── platforms ├── release └── versions ├── README.md ├── client ├── main.css ├── main.html └── main.js ├── package.json └── server └── main.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | 1.2.0-standard-minifiers-package 10 | 1.2.0-meteor-platform-split 11 | 1.2.0-cordova-changes 12 | 1.2.0-breaking-changes 13 | 1.3.0-split-minifiers-package 14 | -------------------------------------------------------------------------------- /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | 8wfbfezq2sq6pkpeqj 8 | -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-base # Packages every Meteor app needs to have 8 | mobile-experience # Packages for a great mobile UX 9 | mongo # The database Meteor supports right now 10 | blaze-html-templates # Compile .html files into Meteor Blaze views 11 | reactive-var # Reactive variable for tracker 12 | jquery # Helpful client-side library 13 | tracker # Meteor's client-side reactive programming library 14 | 15 | standard-minifier-css # CSS minifier run for production mode 16 | standard-minifier-js # JS minifier run for production mode 17 | es5-shim # ECMAScript 5 compatibility for older browsers. 18 | ecmascript # Enable ECMAScript2015+ syntax in app code 19 | 20 | autopublish # Publish all data to the clients (for prototyping) 21 | insecure # Allow all DB writes from clients (for prototyping) 22 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.3.4.1 2 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | allow-deny@1.0.5 2 | autopublish@1.0.7 3 | autoupdate@1.2.10 4 | babel-compiler@6.8.3 5 | babel-runtime@0.1.9_1 6 | base64@1.0.9 7 | binary-heap@1.0.9 8 | blaze@2.1.8 9 | blaze-html-templates@1.0.4 10 | blaze-tools@1.0.9 11 | boilerplate-generator@1.0.9 12 | caching-compiler@1.0.5_1 13 | caching-html-compiler@1.0.6 14 | callback-hook@1.0.9 15 | check@1.2.3 16 | ddp@1.2.5 17 | ddp-client@1.2.8_1 18 | ddp-common@1.2.6 19 | ddp-server@1.2.8_1 20 | deps@1.0.12 21 | diff-sequence@1.0.6 22 | ecmascript@0.4.6_1 23 | ecmascript-runtime@0.2.11_1 24 | ejson@1.0.12 25 | es5-shim@4.5.12_1 26 | fastclick@1.0.12 27 | geojson-utils@1.0.9 28 | hot-code-push@1.0.4 29 | html-tools@1.0.10 30 | htmljs@1.0.10 31 | http@1.1.7 32 | id-map@1.0.8 33 | insecure@1.0.7 34 | jquery@1.11.9 35 | launch-screen@1.0.12 36 | livedata@1.0.18 37 | logging@1.0.13_1 38 | meteor@1.1.15_1 39 | meteor-base@1.0.4 40 | minifier-css@1.1.12_1 41 | minifier-js@1.1.12_1 42 | minimongo@1.0.17 43 | mobile-experience@1.0.4 44 | mobile-status-bar@1.0.12 45 | modules@0.6.4 46 | modules-runtime@0.6.4_1 47 | mongo@1.1.9_1 48 | mongo-id@1.0.5 49 | npm-mongo@1.4.44_1 50 | observe-sequence@1.0.12 51 | ordered-dict@1.0.8 52 | promise@0.7.2_1 53 | random@1.0.10 54 | reactive-var@1.0.10 55 | reload@1.1.10 56 | retry@1.0.8 57 | routepolicy@1.0.11 58 | spacebars@1.0.12 59 | spacebars-compiler@1.0.12 60 | standard-minifier-css@1.0.7_1 61 | standard-minifier-js@1.0.7_1 62 | templating@1.1.12_1 63 | templating-tools@1.0.4 64 | tracker@1.0.14 65 | ui@1.0.11 66 | underscore@1.0.9 67 | url@1.0.10 68 | webapp@1.2.9_1 69 | webapp-hashing@1.0.9 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple meteor example with socket.io 2 | 3 | Using meteor 1.3.4.1 4 | 5 | ## Install npm packages 6 | 7 | In your meteor project: 8 | 9 | meteor npm install --save-dev meteor-node-stubs socket.io socket.io-client 10 | 11 | ## Server 12 | 13 | In your server, use the 'socket.io' package: 14 | 15 | ```javascript 16 | import http from 'http'; 17 | import socket_io from 'socket.io'; 18 | 19 | const PORT = 8080; 20 | 21 | Meteor.startup(() => { 22 | // Server 23 | const server = http.createServer(); 24 | const io = socket_io(server); 25 | 26 | let counter = 0; 27 | 28 | // New client 29 | io.on('connection', function(socket) { 30 | console.log('new socket client'); 31 | }); 32 | 33 | // Start server 34 | try { 35 | server.listen(PORT); 36 | } catch (e) { 37 | console.error(e); 38 | } 39 | }); 40 | ``` 41 | 42 | ## Client 43 | 44 | In your client, use the 'socket.io-client' package: 45 | 46 | ```javascript 47 | // Hack https://github.com/socketio/socket.io-client/issues/961 48 | import Response from 'meteor-node-stubs/node_modules/http-browserify/lib/response'; 49 | if (!Response.prototype.setEncoding) { 50 | Response.prototype.setEncoding = function(encoding) { 51 | // do nothing 52 | } 53 | } 54 | 55 | // Socket io client 56 | const PORT = 8080; 57 | let socket = require('socket.io-client')(`http://localhost:${PORT}`); 58 | 59 | socket.on('connect', function() { 60 | console.log('Client connected'); 61 | }); 62 | socket.on('disconnect', function() { 63 | console.log('Client disconnected'); 64 | }); 65 | ``` 66 | -------------------------------------------------------------------------------- /client/main.css: -------------------------------------------------------------------------------- 1 | /* CSS declarations go here */ 2 | -------------------------------------------------------------------------------- /client/main.html: -------------------------------------------------------------------------------- 1 | 2 | socket-io 3 | 4 | 5 | 6 |

Welcome to Meteor!

7 | 8 | {{> hello}} 9 | {{> info}} 10 | 11 | 12 | 16 | 17 | 26 | -------------------------------------------------------------------------------- /client/main.js: -------------------------------------------------------------------------------- 1 | import { Template } from 'meteor/templating'; 2 | import { Tracker } from 'meteor/tracker'; 3 | import { ReactiveVar } from 'meteor/reactive-var'; 4 | 5 | import './main.html'; 6 | 7 | const counter = new ReactiveVar(0); 8 | 9 | Template.hello.helpers({ 10 | counter() { 11 | return counter.get(); 12 | }, 13 | }); 14 | 15 | Template.hello.events({ 16 | 'click button' () { 17 | // increment the counter when button is clicked 18 | counter.set(counter.get() + 1); 19 | }, 20 | }); 21 | 22 | // Socket io 23 | 24 | // Hack https://github.com/socketio/socket.io-client/issues/961 25 | import Response from 'meteor-node-stubs/node_modules/http-browserify/lib/response'; 26 | if (!Response.prototype.setEncoding) { 27 | Response.prototype.setEncoding = function(encoding) { 28 | // do nothing 29 | } 30 | } 31 | 32 | // Connection 33 | Meteor.startup(() => { 34 | const PORT = window.socketPort || 3003; 35 | let socket = require('socket.io-client')(`http://localhost:${PORT}`); 36 | 37 | socket.on('connect', function() { 38 | console.log('Client connected'); 39 | }); 40 | socket.on('disconnect', function() { 41 | console.log('Client disconnected'); 42 | }); 43 | 44 | // Get counter updates from server 45 | let serverCounter = counter.get(); 46 | socket.on('counter', function(value) { 47 | console.log(`counter changed on server: ${value}`); 48 | if (serverCounter !== value) { 49 | serverCounter = value; 50 | counter.set(value); 51 | } 52 | }); 53 | 54 | // Update counter from client to server 55 | Tracker.autorun(() => { 56 | const c = counter.get(); 57 | if (c !== serverCounter) { 58 | console.log(c); 59 | socket.emit('counter', c); 60 | } 61 | }); 62 | }); 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "socket-io", 3 | "private": true, 4 | "scripts": { 5 | "start": "meteor run" 6 | }, 7 | "dependencies": { 8 | "bufferutil": "^1.2.1", 9 | "meteor-node-stubs": "~0.2.0", 10 | "utf-8-validate": "^1.2.1" 11 | }, 12 | "devDependencies": { 13 | "meteor-node-stubs": "^0.2.3", 14 | "socket.io": "^1.4.8", 15 | "socket.io-client": "^1.4.8" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /server/main.js: -------------------------------------------------------------------------------- 1 | import { Meteor } from 'meteor/meteor'; 2 | 3 | import http from 'http'; 4 | import socket_io from 'socket.io'; 5 | 6 | const PORT = parseInt(process.env.SOCKET_PORT) || 3003; 7 | 8 | // Client-side config 9 | WebAppInternals.addStaticJs(` 10 | window.socketPort = ${PORT}; 11 | `); 12 | 13 | 14 | Meteor.startup(() => { 15 | // Server 16 | const server = http.createServer(); 17 | const io = socket_io(server); 18 | 19 | let counter = 0; 20 | 21 | // New client 22 | io.on('connection', function(socket) { 23 | console.log('new socket client'); 24 | socket.emit('counter', counter); 25 | 26 | // Counter update from client 27 | socket.on('counter', (value) => { 28 | console.log(`counter changed on client: ${value}`); 29 | if (counter !== value) { 30 | io.emit('counter', counter = value); 31 | } 32 | }); 33 | }); 34 | 35 | // Start server 36 | try { 37 | server.listen(PORT); 38 | } catch (e) { 39 | console.error(e); 40 | } 41 | }); 42 | --------------------------------------------------------------------------------