Skip to content

Commit 0125946

Browse files
committed
improve the readme
1 parent 0875432 commit 0125946

File tree

1 file changed

+34
-32
lines changed

1 file changed

+34
-32
lines changed

README.md

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,54 @@
33
Geosockets is a Node.js webserver and javascript browser client for rendering website
44
visitors on a map in realtime using WebSockets and the browser's Geolocation API.
55

6-
See the demo app at [geosockets.herokuapp.com](https://geosockets.herokuapp.com).
6+
See the demo app at [geosockets.herokuapp.com](https://geosockets.herokuapp.com) and
7+
the Heroku WebSocket Beta announcement at [blog.heroku.com/archives/2013/10/8/websockets-public-beta](https://blog.heroku.com/archives/2013/10/8/websockets-public-beta).
78

8-
### Using the Client Script on Your Site
9+
### The Client
910

10-
The Geosockets javascript client can be used on any website:
11+
[client.coffee](https://github.com/heroku-examples/geosockets/blob/master/client.coffee) is written as a node app that uses [Coffeeify](https://github.com/substack/coffeeify) (the red-headed step-child of [browserify](https://github.com/substack/node-browserify#readme)) and [Grunt](http://gruntjs.com/) to transpile the source into a single browser-ready javascript file.
1112

12-
```html
13-
<link rel="stylesheet" type="text/css" href="https://geosockets.herokuapp.com/styles.css">
14-
<script src="https://geosockets.herokuapp.com/client.js"></script>
15-
<script>window.geosocket = new Geosocket("wss://geosockets.herokuapp.com");</script>
16-
<div id="geosockets"></div>
17-
```
13+
When the client is first run in the browser, a [UUID](https://github.com/broofa/node-uuid#readme) token is generated and stored in a cookie which is passed to the server in the headers of each WebSocket message. This gives the server a consistent way to identify each user.
1814

19-
Use CSS to configure the size and position of the map container:
15+
The client uses the [browser's geolocation API](https://www.google.com/search?q=browser%20geolocation%20api) and the [geolocation-stream](https://github.com/maxogden/geolocation-stream#readme) node module to determine the user's physical location, continually listening for location updates in realtime. EOnce the WebSocket connection is establised, the client broadcasts its location to the server:
2016

21-
```css
22-
#geosockets {
23-
width: 100%;
24-
height: 100%;
17+
```js
18+
{
19+
uuid: '6e381608-2e63-4e40-bf6c-31754935a5c2',
20+
url: 'https://blog.heroku.com/archives/2013/10/3/websockets-public-beta',
21+
latitude: 37.7521248,
22+
longitude: -122.42365649999999
2523
}
2624
```
2725

26+
The client then listens for messages from the server, rendering and removing markers from the map as site visitors come and go.
27+
2828
### The Server
2929

3030
[server.coffee](https://github.com/heroku-examples/geosockets/blob/master/server.coffee) is a node app powered by [express 3](http://expressjs.com/guide.html), node's native [http](http://nodejs.org/api/http.html) module, and the [einaros/ws](https://github.com/einaros/ws/blob/master/doc/ws.md) WebSocket implementation. Express is used to serve the static frontend in `/public`.
3131

3232
The server was designed with horizontal scalability in mind. The shared location dataset is stored in a redis datastore and each web dyno connects to this shared resource to pull the complete list of pins to place on the map. Clients viewing the map each establish their own WebSocket connection to any one of the backend web dynos and receive real-time updates as locations are added and removed from the redis datastore.
3333

34-
### The Client
34+
### Embedding the Javscript Client on Your Site
3535

36-
[client.coffee](https://github.com/heroku-examples/geosockets/blob/master/client.coffee) is also written as a node app. [Coffeeify](https://github.com/substack/coffeeify), the red-headed step-child of [browserify](https://github.com/substack/node-browserify#readme), is used in concert with [Grunt](http://gruntjs.com/) to transpile the client into a single browser-ready javascript file.
36+
The Geosockets JavasScript client can be used on any website:
3737

38-
When the client is first run in the browser, a [UUID](https://github.com/broofa/node-uuid#readme) token is generated and stored in a cookie which is passed to the server in the headers of each WebSocket message. This gives the server a consistent way to identify each user.
38+
```html
39+
<link rel="stylesheet" type="text/css" href="https://geosockets.herokuapp.com/styles.css">
40+
<script src="https://geosockets.herokuapp.com/client.js"></script>
41+
<script>window.geosocket = new Geosocket("wss://geosockets.herokuapp.com");</script>
42+
<div id="geosockets"></div>
43+
```
3944

40-
The client uses the [browser's geolocation API](https://www.google.com/search?q=browser%20geolocation%20api) and the [geolocation-stream](https://github.com/maxogden/geolocation-stream#readme) node module to determine the user's physical location, continually listening for location updates in realtime. EOnce the WebSocket connection is establised, the client broadcasts its location to the server:
45+
Use CSS to configure the size and position of the map container:
4146

42-
```js
43-
{
44-
uuid: '6e381608-2e63-4e40-bf6c-31754935a5c2',
45-
url: 'https://blog.heroku.com/archives/2013/10/3/websockets-public-beta',
46-
latitude: 37.7521248,
47-
longitude: -122.42365649999999
47+
```css
48+
#geosockets {
49+
width: 100%;
50+
height: 100%;
4851
}
4952
```
5053

51-
The client then listens for messages from the server, rendering and removing markers from the map as site visitors come and go.
52-
5354
### Running Geosockets Locally
5455

5556
If you're new to Heroku or Node.js development, you'll need to install a few things first:
@@ -66,22 +67,23 @@ cd geosockets
6667
npm install
6768
```
6869

69-
Fire up redis, a grunt watcher, and the node webserver at [localhost:5000/?debug](http://localhost:5000/?debug):
70+
The foreman [Procfile](https://github.com/heroku-examples/geosockets/blob/master/Procfile) defines the processes
71+
required to run the app. Fire up redis, a grunt watcher, and the node webserver at [localhost:5000/?debug](http://localhost:5000/?debug):
7072

7173
````
7274
foreman start
7375
```
7476
75-
## Debuggging
77+
### Debugging
7678
77-
The client uses a custom logging function, found in `lib/logger.coffee`. This function
78-
only logs messages to the console if a `debug` query param is present in the URL, e.g.
79+
The client uses a [custom logging function](https://github.com/heroku-examples/geosockets/blob/master/lib/logger.coffee)
80+
that only logs messages to the console if a `debug` query param is present in the URL, e.g.
7981
[localhost:5000/?debug](http://localhost:5000/?debug). This allows you to view client
8082
behavior in production without exposing your site visitors to debugging data.
8183
82-
## Testing
84+
### Testing
8385
84-
Simple integration testing is done with [CasperJS](http://casperjs.org/), a navigation scripting & testing utility for [PhantomJS](http://phantomjs.org/). Casper is integrated into the app using the [grunt-casper](https://github.com/iamchrismiller/grunt-casper) plugin, and run with foreman. Each time you make a change to your client, the casper tests are run automatically.
86+
Crude integration testing is done with [CasperJS](http://casperjs.org/), a navigation scripting & testing utility for [PhantomJS](http://phantomjs.org/). Casper is integrated into the app using the [grunt-casper](https://github.com/iamchrismiller/grunt-casper) plugin, and run with foreman. Each time you make a change to your client, the casper tests are run automatically.
8587
8688
### Deploying Geosockets to Heroku
8789

0 commit comments

Comments
 (0)