Björn
4 years ago
commit
d3a358b03a
@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
build
|
||||
*.DS_Store
|
||||
Thumbs.db
|
||||
.idea
|
||||
*.log
|
||||
@ -0,0 +1,51 @@
|
||||
# Lessons Learned: Realtime User with Socket.IO
|
||||
|
||||
Simple Webapp to show how many Clients are on a Site, using [https://socket.io/](socket.io) and Nodejs as Server.
|
||||
|
||||
|
||||
|
||||
```
|
||||
npm install
|
||||
node server.js
|
||||
```
|
||||
|
||||
If you use nginx,
|
||||
|
||||
```
|
||||
upstream socketio {
|
||||
server 0.0.0.0:3000;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
|
||||
# Host that will serve this project.
|
||||
server_name <domain>;
|
||||
|
||||
# The location of our projects public directory.
|
||||
root <path>/public;
|
||||
|
||||
# index File
|
||||
index index.html;
|
||||
|
||||
# rewrite
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html?it=$uri&$args;
|
||||
}
|
||||
|
||||
location /socket.io {
|
||||
proxy_pass http://socketio;
|
||||
proxy_redirect off;
|
||||
|
||||
proxy_http_version 1.1;
|
||||
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"/public/js/index.js": "/public/js/index.js",
|
||||
"/public/css/styles.css": "/public/css/styles.css"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,24 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"socket.io": "^2.3.0",
|
||||
"socket.io-client": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "^7.0.2",
|
||||
"laravel-mix": "^5.0.4",
|
||||
"resolve-url-loader": "^3.1.0",
|
||||
"sass": "^1.26.10",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"watch": "npm run development -- --watch",
|
||||
"watch-poll": "npm run watch -- --watch-poll",
|
||||
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"prod": "npm run production",
|
||||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.wrapper,body,html{height:100%}.wrapper{padding:0;margin:0;display:flex;align-items:center;justify-content:center}.count{font-size:60px}
|
||||
@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en_EN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lessons Learned - Realtime User with Socket.IO</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="/css/styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div id="count" class="count"></div>
|
||||
<div id="now" class="now"></div>
|
||||
</div>
|
||||
<noscript>
|
||||
<p>Only works with Javascript!</p>
|
||||
</noscript>
|
||||
<script src="/js/index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* The buffer module from node.js, for the browser.
|
||||
*
|
||||
* @author Feross Aboukhadijeh <http://feross.org>
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/*! https://mths.be/utf8js v2.1.2 by @mathias */
|
||||
@ -0,0 +1,35 @@
|
||||
const server = require('http').createServer()
|
||||
const io = require('socket.io')(server)
|
||||
|
||||
/**
|
||||
* on client connection
|
||||
*
|
||||
*/
|
||||
io.on('connection', (socket) => {
|
||||
|
||||
// send count to all clients
|
||||
io.sockets.emit('count', getCurrentState(socket))
|
||||
|
||||
// send count to all clients if user disconnect
|
||||
socket.on('disconnect', () => {
|
||||
io.sockets.emit('count', getCurrentState(socket))
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
/**
|
||||
* get current state, count of clients and time
|
||||
*
|
||||
* @return object
|
||||
*/
|
||||
function getCurrentState(socket)
|
||||
{
|
||||
const now = new Date().toUTCString()
|
||||
|
||||
return {
|
||||
'count': socket.client.conn.server.clientsCount,
|
||||
'now' : now
|
||||
}
|
||||
}
|
||||
|
||||
server.listen(3000)
|
||||
@ -0,0 +1,11 @@
|
||||
const io = require('socket.io-client')
|
||||
const socket = io()
|
||||
|
||||
socket.on('connect', () => {
|
||||
socket.on('count', (data) => {
|
||||
|
||||
// adding count and time from server
|
||||
document.getElementById('count').innerHTML = data.count
|
||||
document.getElementById('now').innerHTML = 'last update on ' + data.now;
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,16 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 60px;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
const mix = require('laravel-mix');
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Asset Management
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Mix provides a clean, fluent API for defining some Webpack build steps
|
||||
| for your Laravel application. By default, we are compiling the Sass
|
||||
| file for your application, as well as bundling up your JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
mix.js('src/index.js', 'public/js')
|
||||
.sass('src/styles.scss', 'public/css');
|
||||
Loading…
Reference in new issue