├── .gitignore
├── .meteor
├── .gitignore
├── release
├── platforms
├── .id
├── .finished-upgraders
├── packages
└── versions
├── client
├── main.css
├── main.html
└── main.js
├── package.json
├── .gitattributes
├── server
└── main.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/.meteor/.gitignore:
--------------------------------------------------------------------------------
1 | local
2 |
--------------------------------------------------------------------------------
/.meteor/release:
--------------------------------------------------------------------------------
1 | METEOR@1.3.4.1
2 |
--------------------------------------------------------------------------------
/.meteor/platforms:
--------------------------------------------------------------------------------
1 | server
2 | browser
3 |
--------------------------------------------------------------------------------
/client/main.css:
--------------------------------------------------------------------------------
1 | /* CSS declarations go here */
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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/client/main.html:
--------------------------------------------------------------------------------
1 |
2 | socket-io
3 |
4 |
5 |
6 | Welcome to Meteor!
7 |
8 | {{> hello}}
9 | {{> info}}
10 |
11 |
12 |
13 |
14 | You've pressed the button {{counter}} times.
15 |
16 |
17 |
18 | Learn Meteor!
19 |
25 |
26 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------