mirror of
https://github.com/socketio/socket.io.git
synced 2026-01-11 16:08:24 -05:00
Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
225ade062a | ||
|
|
494c64e44f | ||
|
|
67a61e39e6 | ||
|
|
7467216e02 | ||
|
|
7247b4051f | ||
|
|
992c9380c3 | ||
|
|
8b404f424b | ||
|
|
12221f296d | ||
|
|
6f4bd7f8e7 | ||
|
|
4f2e9a716d | ||
|
|
9e8f288ca9 | ||
|
|
86eb4227b2 | ||
|
|
cf873fd831 | ||
|
|
0d10e6131b | ||
|
|
10aafbbc16 | ||
|
|
f34cfca26d | ||
|
|
d412e876b8 |
2
.github/workflows/ci.yml
vendored
2
.github/workflows/ci.yml
vendored
@@ -12,7 +12,7 @@ jobs:
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [10.x, 12.x, 14.x]
|
||||
node-version: [10.x, 12.x, 14.x, 15.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
18
CHANGELOG.md
18
CHANGELOG.md
@@ -1,3 +1,21 @@
|
||||
## [3.1.2](https://github.com/socketio/socket.io/compare/3.1.1...3.1.2) (2021-02-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* ignore packets received after disconnection ([494c64e](https://github.com/socketio/socket.io/commit/494c64e44f645cbd24c645f1186d203789e84af0))
|
||||
|
||||
|
||||
## [3.1.1](https://github.com/socketio/socket.io/compare/3.1.0...3.1.1) (2021-02-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* properly parse the CONNECT packet in v2 compatibility mode ([6f4bd7f](https://github.com/socketio/socket.io/commit/6f4bd7f8e7c41a075a8014565330a77c38b03a8d))
|
||||
* **typings:** add return types and general-case overload signatures ([#3776](https://github.com/socketio/socket.io/issues/3776)) ([9e8f288](https://github.com/socketio/socket.io/commit/9e8f288ca9f14f91064b8d3cce5946f7d23d407c))
|
||||
* **typings:** update the types of "query", "auth" and "headers" ([4f2e9a7](https://github.com/socketio/socket.io/commit/4f2e9a716d9835b550c8fd9a9b429ebf069c2895))
|
||||
|
||||
|
||||
# [3.1.0](https://github.com/socketio/socket.io/compare/3.0.5...3.1.0) (2021-01-15)
|
||||
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@ For this purpose, it relies on [Engine.IO](https://github.com/socketio/engine.io
|
||||
|
||||
#### Auto-reconnection support
|
||||
|
||||
Unless instructed otherwise a disconnected client will try to reconnect forever, until the server is available again. Please see the available reconnection options [here](https://github.com/socketio/socket.io-client/blob/master/docs/API.md#new-managerurl-options).
|
||||
Unless instructed otherwise a disconnected client will try to reconnect forever, until the server is available again. Please see the available reconnection options [here](https://socket.io/docs/v3/client-api/#new-Manager-url-options).
|
||||
|
||||
#### Disconnection detection
|
||||
|
||||
@@ -85,7 +85,11 @@ This is a useful feature to send notifications to a group of users, or to a give
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
// with npm
|
||||
npm install socket.io
|
||||
|
||||
// with yarn
|
||||
yarn add socket.io
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Socket.IO v3.1.0
|
||||
* Socket.IO v3.1.2
|
||||
* (c) 2014-2021 Guillermo Rauch
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
@@ -12,7 +12,7 @@
|
||||
exports["io"] = factory();
|
||||
else
|
||||
root["io"] = factory();
|
||||
})(window, function() {
|
||||
})(this, function() {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
@@ -151,7 +151,7 @@ function lookup(uri, opts) {
|
||||
}
|
||||
|
||||
opts = opts || {};
|
||||
var parsed = url_1.url(uri);
|
||||
var parsed = url_1.url(uri, opts.path);
|
||||
var source = parsed.source;
|
||||
var id = parsed.id;
|
||||
var path = parsed.path;
|
||||
@@ -172,7 +172,7 @@ function lookup(uri, opts) {
|
||||
}
|
||||
|
||||
if (parsed.query && !opts.query) {
|
||||
opts.query = parsed.query;
|
||||
opts.query = parsed.queryKey;
|
||||
}
|
||||
|
||||
return io.socket(parsed.path, opts);
|
||||
@@ -592,7 +592,6 @@ var Manager = /*#__PURE__*/function (_Emitter) {
|
||||
key: "_packet",
|
||||
value: function _packet(packet) {
|
||||
debug("writing packet %j", packet);
|
||||
if (packet.query && packet.type === 0) packet.nsp += "?" + packet.query;
|
||||
var encodedPackets = this.encoder.encode(packet);
|
||||
|
||||
for (var i = 0; i < encodedPackets.length; i++) {
|
||||
@@ -1458,13 +1457,16 @@ var debug = __webpack_require__(/*! debug */ "./node_modules/debug/src/browser.j
|
||||
* URL parser.
|
||||
*
|
||||
* @param uri - url
|
||||
* @param path - the request path of the connection
|
||||
* @param loc - An object meant to mimic window.location.
|
||||
* Defaults to window.location.
|
||||
* @public
|
||||
*/
|
||||
|
||||
|
||||
function url(uri, loc) {
|
||||
function url(uri) {
|
||||
var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
|
||||
var loc = arguments.length > 2 ? arguments[2] : undefined;
|
||||
var obj = uri; // default to window.location
|
||||
|
||||
loc = loc || typeof location !== "undefined" && location;
|
||||
@@ -1507,7 +1509,7 @@ function url(uri, loc) {
|
||||
var ipv6 = obj.host.indexOf(":") !== -1;
|
||||
var host = ipv6 ? "[" + obj.host + "]" : obj.host; // define unique id
|
||||
|
||||
obj.id = obj.protocol + "://" + host + ":" + obj.port; // define href
|
||||
obj.id = obj.protocol + "://" + host + ":" + obj.port + path; // define href
|
||||
|
||||
obj.href = obj.protocol + "://" + host + (loc && loc.port === obj.port ? "" : ":" + obj.port);
|
||||
return obj;
|
||||
@@ -1797,7 +1799,7 @@ Emitter.prototype.hasListeners = function (event) {
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
/* WEBPACK VAR INJECTION */(function(process) {/* eslint-env browser */
|
||||
/* eslint-env browser */
|
||||
|
||||
/**
|
||||
* This is the web browser implementation of `debug()`.
|
||||
@@ -1978,7 +1980,6 @@ formatters.j = function (v) {
|
||||
return '[UnexpectedJSONParseError]: ' + error.message;
|
||||
}
|
||||
};
|
||||
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../process/browser.js */ "./node_modules/process/browser.js")))
|
||||
|
||||
/***/ }),
|
||||
|
||||
@@ -2432,6 +2433,17 @@ var Socket = /*#__PURE__*/function (_Emitter) {
|
||||
|
||||
_this.pingTimeoutTimer = null;
|
||||
|
||||
if (typeof addEventListener === "function") {
|
||||
addEventListener("beforeunload", function () {
|
||||
if (_this.transport) {
|
||||
// silently close the transport
|
||||
_this.transport.removeAllListeners();
|
||||
|
||||
_this.transport.close();
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
_this.open();
|
||||
|
||||
return _this;
|
||||
@@ -3279,11 +3291,6 @@ var rEscapedNewline = /\\n/g;
|
||||
*/
|
||||
|
||||
var callbacks;
|
||||
/**
|
||||
* Noop.
|
||||
*/
|
||||
|
||||
function empty() {}
|
||||
|
||||
var JSONPPolling = /*#__PURE__*/function (_Polling) {
|
||||
_inherits(JSONPPolling, _Polling);
|
||||
@@ -3319,14 +3326,7 @@ var JSONPPolling = /*#__PURE__*/function (_Polling) {
|
||||
self.onData(msg);
|
||||
}); // append to query string
|
||||
|
||||
_this.query.j = _this.index; // prevent spurious errors from being emitted when the window is unloaded
|
||||
|
||||
if (typeof addEventListener === "function") {
|
||||
addEventListener("beforeunload", function () {
|
||||
if (self.script) self.script.onerror = empty;
|
||||
}, false);
|
||||
}
|
||||
|
||||
_this.query.j = _this.index;
|
||||
return _this;
|
||||
}
|
||||
/**
|
||||
@@ -3344,6 +3344,9 @@ var JSONPPolling = /*#__PURE__*/function (_Polling) {
|
||||
*/
|
||||
value: function doClose() {
|
||||
if (this.script) {
|
||||
// prevent spurious errors from being emitted when the window is unloaded
|
||||
this.script.onerror = function () {};
|
||||
|
||||
this.script.parentNode.removeChild(this.script);
|
||||
this.script = null;
|
||||
}
|
||||
@@ -4425,6 +4428,7 @@ var WS = /*#__PURE__*/function (_Transport) {
|
||||
value: function doClose() {
|
||||
if (typeof this.ws !== "undefined") {
|
||||
this.ws.close();
|
||||
this.ws = null;
|
||||
}
|
||||
}
|
||||
/**
|
||||
@@ -5188,224 +5192,6 @@ function queryKey(uri, query) {
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/process/browser.js":
|
||||
/*!*****************************************!*\
|
||||
!*** ./node_modules/process/browser.js ***!
|
||||
\*****************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
// shim for using process in browser
|
||||
var process = module.exports = {}; // cached from whatever global is present so that test runners that stub it
|
||||
// don't break things. But we need to wrap it in a try catch in case it is
|
||||
// wrapped in strict mode code which doesn't define any globals. It's inside a
|
||||
// function because try/catches deoptimize in certain engines.
|
||||
|
||||
var cachedSetTimeout;
|
||||
var cachedClearTimeout;
|
||||
|
||||
function defaultSetTimout() {
|
||||
throw new Error('setTimeout has not been defined');
|
||||
}
|
||||
|
||||
function defaultClearTimeout() {
|
||||
throw new Error('clearTimeout has not been defined');
|
||||
}
|
||||
|
||||
(function () {
|
||||
try {
|
||||
if (typeof setTimeout === 'function') {
|
||||
cachedSetTimeout = setTimeout;
|
||||
} else {
|
||||
cachedSetTimeout = defaultSetTimout;
|
||||
}
|
||||
} catch (e) {
|
||||
cachedSetTimeout = defaultSetTimout;
|
||||
}
|
||||
|
||||
try {
|
||||
if (typeof clearTimeout === 'function') {
|
||||
cachedClearTimeout = clearTimeout;
|
||||
} else {
|
||||
cachedClearTimeout = defaultClearTimeout;
|
||||
}
|
||||
} catch (e) {
|
||||
cachedClearTimeout = defaultClearTimeout;
|
||||
}
|
||||
})();
|
||||
|
||||
function runTimeout(fun) {
|
||||
if (cachedSetTimeout === setTimeout) {
|
||||
//normal enviroments in sane situations
|
||||
return setTimeout(fun, 0);
|
||||
} // if setTimeout wasn't available but was latter defined
|
||||
|
||||
|
||||
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
|
||||
cachedSetTimeout = setTimeout;
|
||||
return setTimeout(fun, 0);
|
||||
}
|
||||
|
||||
try {
|
||||
// when when somebody has screwed with setTimeout but no I.E. maddness
|
||||
return cachedSetTimeout(fun, 0);
|
||||
} catch (e) {
|
||||
try {
|
||||
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
|
||||
return cachedSetTimeout.call(null, fun, 0);
|
||||
} catch (e) {
|
||||
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
|
||||
return cachedSetTimeout.call(this, fun, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function runClearTimeout(marker) {
|
||||
if (cachedClearTimeout === clearTimeout) {
|
||||
//normal enviroments in sane situations
|
||||
return clearTimeout(marker);
|
||||
} // if clearTimeout wasn't available but was latter defined
|
||||
|
||||
|
||||
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
|
||||
cachedClearTimeout = clearTimeout;
|
||||
return clearTimeout(marker);
|
||||
}
|
||||
|
||||
try {
|
||||
// when when somebody has screwed with setTimeout but no I.E. maddness
|
||||
return cachedClearTimeout(marker);
|
||||
} catch (e) {
|
||||
try {
|
||||
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
|
||||
return cachedClearTimeout.call(null, marker);
|
||||
} catch (e) {
|
||||
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
|
||||
// Some versions of I.E. have different rules for clearTimeout vs setTimeout
|
||||
return cachedClearTimeout.call(this, marker);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var queue = [];
|
||||
var draining = false;
|
||||
var currentQueue;
|
||||
var queueIndex = -1;
|
||||
|
||||
function cleanUpNextTick() {
|
||||
if (!draining || !currentQueue) {
|
||||
return;
|
||||
}
|
||||
|
||||
draining = false;
|
||||
|
||||
if (currentQueue.length) {
|
||||
queue = currentQueue.concat(queue);
|
||||
} else {
|
||||
queueIndex = -1;
|
||||
}
|
||||
|
||||
if (queue.length) {
|
||||
drainQueue();
|
||||
}
|
||||
}
|
||||
|
||||
function drainQueue() {
|
||||
if (draining) {
|
||||
return;
|
||||
}
|
||||
|
||||
var timeout = runTimeout(cleanUpNextTick);
|
||||
draining = true;
|
||||
var len = queue.length;
|
||||
|
||||
while (len) {
|
||||
currentQueue = queue;
|
||||
queue = [];
|
||||
|
||||
while (++queueIndex < len) {
|
||||
if (currentQueue) {
|
||||
currentQueue[queueIndex].run();
|
||||
}
|
||||
}
|
||||
|
||||
queueIndex = -1;
|
||||
len = queue.length;
|
||||
}
|
||||
|
||||
currentQueue = null;
|
||||
draining = false;
|
||||
runClearTimeout(timeout);
|
||||
}
|
||||
|
||||
process.nextTick = function (fun) {
|
||||
var args = new Array(arguments.length - 1);
|
||||
|
||||
if (arguments.length > 1) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
args[i - 1] = arguments[i];
|
||||
}
|
||||
}
|
||||
|
||||
queue.push(new Item(fun, args));
|
||||
|
||||
if (queue.length === 1 && !draining) {
|
||||
runTimeout(drainQueue);
|
||||
}
|
||||
}; // v8 likes predictible objects
|
||||
|
||||
|
||||
function Item(fun, array) {
|
||||
this.fun = fun;
|
||||
this.array = array;
|
||||
}
|
||||
|
||||
Item.prototype.run = function () {
|
||||
this.fun.apply(null, this.array);
|
||||
};
|
||||
|
||||
process.title = 'browser';
|
||||
process.browser = true;
|
||||
process.env = {};
|
||||
process.argv = [];
|
||||
process.version = ''; // empty string to avoid regexp issues
|
||||
|
||||
process.versions = {};
|
||||
|
||||
function noop() {}
|
||||
|
||||
process.on = noop;
|
||||
process.addListener = noop;
|
||||
process.once = noop;
|
||||
process.off = noop;
|
||||
process.removeListener = noop;
|
||||
process.removeAllListeners = noop;
|
||||
process.emit = noop;
|
||||
process.prependListener = noop;
|
||||
process.prependOnceListener = noop;
|
||||
|
||||
process.listeners = function (name) {
|
||||
return [];
|
||||
};
|
||||
|
||||
process.binding = function (name) {
|
||||
throw new Error('process.binding is not supported');
|
||||
};
|
||||
|
||||
process.cwd = function () {
|
||||
return '/';
|
||||
};
|
||||
|
||||
process.chdir = function (dir) {
|
||||
throw new Error('process.chdir is not supported');
|
||||
};
|
||||
|
||||
process.umask = function () {
|
||||
return 0;
|
||||
};
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/socket.io-parser/dist/binary.js":
|
||||
/*!******************************************************!*\
|
||||
!*** ./node_modules/socket.io-parser/dist/binary.js ***!
|
||||
|
||||
File diff suppressed because one or more lines are too long
4
client-dist/socket.io.min.js
vendored
4
client-dist/socket.io.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
client-dist/socket.io.msgpack.min.js
vendored
4
client-dist/socket.io.msgpack.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,4 +1,4 @@
|
||||
FROM mhart/alpine-node:6
|
||||
FROM node:14-alpine
|
||||
|
||||
# Create app directory
|
||||
RUN mkdir -p /usr/src/app
|
||||
@@ -6,7 +6,7 @@ WORKDIR /usr/src/app
|
||||
|
||||
# Install app dependencies
|
||||
COPY package.json /usr/src/app/
|
||||
RUN npm install
|
||||
RUN npm install --prod
|
||||
|
||||
# Bundle app source
|
||||
COPY . /usr/src/app
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
"license": "BSD",
|
||||
"dependencies": {
|
||||
"express": "4.13.4",
|
||||
"socket.io": "^1.7.2",
|
||||
"socket.io-redis": "^3.0.0"
|
||||
"socket.io": "^3.1.0",
|
||||
"socket.io-redis": "^6.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node index.js"
|
||||
|
||||
@@ -3,6 +3,8 @@ Listen 80
|
||||
|
||||
ServerName localhost
|
||||
|
||||
LoadModule mpm_event_module modules/mod_mpm_event.so
|
||||
|
||||
LoadModule authn_file_module modules/mod_authn_file.so
|
||||
LoadModule authn_core_module modules/mod_authn_core.so
|
||||
LoadModule authz_host_module modules/mod_authz_host.so
|
||||
|
||||
@@ -6,7 +6,7 @@ WORKDIR /usr/src/app
|
||||
|
||||
# Install app dependencies
|
||||
COPY package.json /usr/src/app/
|
||||
RUN npm install
|
||||
RUN npm install --prod
|
||||
|
||||
# Bundle app source
|
||||
COPY . /usr/src/app
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
"license": "BSD",
|
||||
"dependencies": {
|
||||
"express": "4.13.4",
|
||||
"socket.io": "^1.7.2",
|
||||
"socket.io-redis": "^3.0.0"
|
||||
"socket.io": "^3.1.0",
|
||||
"socket.io-redis": "^6.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node index.js"
|
||||
|
||||
@@ -22,6 +22,16 @@ Each node connects to the redis backend, which will enable to broadcast to every
|
||||
$ docker-compose stop server-george
|
||||
```
|
||||
|
||||
A `client` container is included in the `docker-compose.yml` file, in order to test the routing.
|
||||
|
||||
You can create additional `client` containers with:
|
||||
|
||||
```
|
||||
$ docker-compose up -d --scale=client=10 client
|
||||
# and then
|
||||
$ docker-compose logs client
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- Multiple users can join a chat room by each entering a unique username
|
||||
|
||||
15
examples/cluster-nginx/client/Dockerfile
Normal file
15
examples/cluster-nginx/client/Dockerfile
Normal file
@@ -0,0 +1,15 @@
|
||||
FROM node:14-alpine
|
||||
|
||||
# Create app directory
|
||||
RUN mkdir -p /usr/src/app
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# Install app dependencies
|
||||
COPY package.json /usr/src/app/
|
||||
RUN npm install --prod
|
||||
|
||||
# Bundle app source
|
||||
COPY . /usr/src/app
|
||||
|
||||
EXPOSE 3000
|
||||
CMD [ "npm", "start" ]
|
||||
13
examples/cluster-nginx/client/index.js
Normal file
13
examples/cluster-nginx/client/index.js
Normal file
@@ -0,0 +1,13 @@
|
||||
const socket = require('socket.io-client')('ws://nginx');
|
||||
|
||||
socket.on('connect', () => {
|
||||
console.log('connected');
|
||||
});
|
||||
|
||||
socket.on('my-name-is', (serverName) => {
|
||||
console.log(`connected to ${serverName}`);
|
||||
});
|
||||
|
||||
socket.on('disconnect', (reason) => {
|
||||
console.log(`disconnected due to ${reason}`);
|
||||
});
|
||||
15
examples/cluster-nginx/client/package.json
Normal file
15
examples/cluster-nginx/client/package.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "socket.io-chat",
|
||||
"version": "0.0.0",
|
||||
"description": "A simple chat client using socket.io",
|
||||
"main": "index.js",
|
||||
"author": "Grant Timmerman",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"socket.io-client": "^3.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node index.js"
|
||||
}
|
||||
}
|
||||
@@ -45,6 +45,11 @@ server-ringo:
|
||||
environment:
|
||||
- NAME=Ringo
|
||||
|
||||
client:
|
||||
build: ./client
|
||||
links:
|
||||
- nginx
|
||||
|
||||
redis:
|
||||
image: redis:alpine
|
||||
expose:
|
||||
|
||||
@@ -24,8 +24,12 @@ http {
|
||||
}
|
||||
|
||||
upstream nodes {
|
||||
# enable sticky session
|
||||
ip_hash;
|
||||
# enable sticky session with either "hash" (uses the complete IP address)
|
||||
hash $remote_addr consistent;
|
||||
# or "ip_hash" (uses the first three octets of the client IPv4 address, or the entire IPv6 address)
|
||||
# ip_hash;
|
||||
# or "sticky" (needs commercial subscription)
|
||||
# sticky cookie srv_id expires=1h domain=.example.com path=/;
|
||||
|
||||
server server-john:3000;
|
||||
server server-paul:3000;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
FROM mhart/alpine-node:6
|
||||
FROM node:14-alpine
|
||||
|
||||
# Create app directory
|
||||
RUN mkdir -p /usr/src/app
|
||||
@@ -6,7 +6,7 @@ WORKDIR /usr/src/app
|
||||
|
||||
# Install app dependencies
|
||||
COPY package.json /usr/src/app/
|
||||
RUN npm install
|
||||
RUN npm install --prod
|
||||
|
||||
# Bundle app source
|
||||
COPY . /usr/src/app
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"express": "4.13.4",
|
||||
"socket.io": "^1.7.2",
|
||||
"socket.io-redis": "^3.0.0"
|
||||
"socket.io": "^3.1.0",
|
||||
"socket.io-redis": "^6.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node index.js"
|
||||
|
||||
22
examples/cluster-traefik/README.md
Normal file
22
examples/cluster-traefik/README.md
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
# Socket.IO Chat with traefik & [redis](https://redis.io/)
|
||||
|
||||
A simple chat demo for Socket.IO
|
||||
|
||||
## How to use
|
||||
|
||||
Install [Docker Compose](https://docs.docker.com/compose/install/), then:
|
||||
|
||||
```
|
||||
$ docker-compose up -d
|
||||
```
|
||||
|
||||
And then point your browser to `http://localhost:3000`.
|
||||
|
||||
You can then scale the server to multiple instances:
|
||||
|
||||
```
|
||||
$ docker-compose up -d --scale=server=7
|
||||
```
|
||||
|
||||
The session stickiness, which is [required](https://socket.io/docs/v3/using-multiple-nodes/) when using multiple Socket.IO server instances, is achieved with a cookie. More information [here](https://doc.traefik.io/traefik/v2.0/routing/services/#sticky-sessions).
|
||||
27
examples/cluster-traefik/docker-compose.yml
Normal file
27
examples/cluster-traefik/docker-compose.yml
Normal file
@@ -0,0 +1,27 @@
|
||||
version: "3"
|
||||
|
||||
services:
|
||||
traefik:
|
||||
image: traefik:2.4
|
||||
volumes:
|
||||
- ./traefik.yml:/etc/traefik/traefik.yml
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
links:
|
||||
- server
|
||||
ports:
|
||||
- "3000:80"
|
||||
- "8080:8080"
|
||||
|
||||
server:
|
||||
build: ./server
|
||||
links:
|
||||
- redis
|
||||
labels:
|
||||
- "traefik.http.routers.chat.rule=PathPrefix(`/`)"
|
||||
- traefik.http.services.chat.loadBalancer.sticky.cookie.name=server_id
|
||||
- traefik.http.services.chat.loadBalancer.sticky.cookie.httpOnly=true
|
||||
|
||||
redis:
|
||||
image: redis:6-alpine
|
||||
labels:
|
||||
- traefik.enable=false
|
||||
15
examples/cluster-traefik/server/Dockerfile
Normal file
15
examples/cluster-traefik/server/Dockerfile
Normal file
@@ -0,0 +1,15 @@
|
||||
FROM node:14-alpine
|
||||
|
||||
# Create app directory
|
||||
RUN mkdir -p /usr/src/app
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# Install app dependencies
|
||||
COPY package.json /usr/src/app/
|
||||
RUN npm install --prod
|
||||
|
||||
# Bundle app source
|
||||
COPY . /usr/src/app
|
||||
|
||||
EXPOSE 3000
|
||||
CMD [ "npm", "start" ]
|
||||
83
examples/cluster-traefik/server/index.js
Normal file
83
examples/cluster-traefik/server/index.js
Normal file
@@ -0,0 +1,83 @@
|
||||
// Setup basic express server
|
||||
var express = require('express');
|
||||
var app = express();
|
||||
var server = require('http').createServer(app);
|
||||
var io = require('socket.io')(server);
|
||||
var redis = require('socket.io-redis');
|
||||
var port = process.env.PORT || 3000;
|
||||
var crypto = require('crypto');
|
||||
var serverName = crypto.randomBytes(3).toString('hex');
|
||||
|
||||
io.adapter(redis({ host: 'redis', port: 6379 }));
|
||||
|
||||
server.listen(port, function () {
|
||||
console.log('Server listening at port %d', port);
|
||||
console.log('Hello, I\'m %s, how can I help?', serverName);
|
||||
});
|
||||
|
||||
// Routing
|
||||
app.use(express.static(__dirname + '/public'));
|
||||
|
||||
// Chatroom
|
||||
|
||||
var numUsers = 0;
|
||||
|
||||
io.on('connection', function (socket) {
|
||||
socket.emit('my-name-is', serverName);
|
||||
|
||||
var addedUser = false;
|
||||
|
||||
// when the client emits 'new message', this listens and executes
|
||||
socket.on('new message', function (data) {
|
||||
// we tell the client to execute 'new message'
|
||||
socket.broadcast.emit('new message', {
|
||||
username: socket.username,
|
||||
message: data
|
||||
});
|
||||
});
|
||||
|
||||
// when the client emits 'add user', this listens and executes
|
||||
socket.on('add user', function (username) {
|
||||
if (addedUser) return;
|
||||
|
||||
// we store the username in the socket session for this client
|
||||
socket.username = username;
|
||||
++numUsers;
|
||||
addedUser = true;
|
||||
socket.emit('login', {
|
||||
numUsers: numUsers
|
||||
});
|
||||
// echo globally (all clients) that a person has connected
|
||||
socket.broadcast.emit('user joined', {
|
||||
username: socket.username,
|
||||
numUsers: numUsers
|
||||
});
|
||||
});
|
||||
|
||||
// when the client emits 'typing', we broadcast it to others
|
||||
socket.on('typing', function () {
|
||||
socket.broadcast.emit('typing', {
|
||||
username: socket.username
|
||||
});
|
||||
});
|
||||
|
||||
// when the client emits 'stop typing', we broadcast it to others
|
||||
socket.on('stop typing', function () {
|
||||
socket.broadcast.emit('stop typing', {
|
||||
username: socket.username
|
||||
});
|
||||
});
|
||||
|
||||
// when the user disconnects.. perform this
|
||||
socket.on('disconnect', function () {
|
||||
if (addedUser) {
|
||||
--numUsers;
|
||||
|
||||
// echo globally that this client has left
|
||||
socket.broadcast.emit('user left', {
|
||||
username: socket.username,
|
||||
numUsers: numUsers
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
17
examples/cluster-traefik/server/package.json
Normal file
17
examples/cluster-traefik/server/package.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "socket.io-chat",
|
||||
"version": "0.0.0",
|
||||
"description": "A simple chat client using socket.io",
|
||||
"main": "index.js",
|
||||
"author": "Grant Timmerman",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"express": "4.13.4",
|
||||
"socket.io": "^3.1.0",
|
||||
"socket.io-redis": "^6.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node index.js"
|
||||
}
|
||||
}
|
||||
28
examples/cluster-traefik/server/public/index.html
Normal file
28
examples/cluster-traefik/server/public/index.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Socket.IO Chat Example</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<ul class="pages">
|
||||
<li class="chat page">
|
||||
<div class="chatArea">
|
||||
<ul class="messages"></ul>
|
||||
</div>
|
||||
<input class="inputMessage" placeholder="Type here..."/>
|
||||
</li>
|
||||
<li class="login page">
|
||||
<div class="form">
|
||||
<h3 class="title">What's your nickname?</h3>
|
||||
<input class="usernameInput" type="text" maxlength="14" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
286
examples/cluster-traefik/server/public/main.js
Normal file
286
examples/cluster-traefik/server/public/main.js
Normal file
@@ -0,0 +1,286 @@
|
||||
$(function() {
|
||||
var FADE_TIME = 150; // ms
|
||||
var TYPING_TIMER_LENGTH = 400; // ms
|
||||
var COLORS = [
|
||||
'#e21400', '#91580f', '#f8a700', '#f78b00',
|
||||
'#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
|
||||
'#3b88eb', '#3824aa', '#a700ff', '#d300e7'
|
||||
];
|
||||
|
||||
// Initialize variables
|
||||
var $window = $(window);
|
||||
var $usernameInput = $('.usernameInput'); // Input for username
|
||||
var $messages = $('.messages'); // Messages area
|
||||
var $inputMessage = $('.inputMessage'); // Input message input box
|
||||
|
||||
var $loginPage = $('.login.page'); // The login page
|
||||
var $chatPage = $('.chat.page'); // The chatroom page
|
||||
|
||||
// Prompt for setting a username
|
||||
var username;
|
||||
var connected = false;
|
||||
var typing = false;
|
||||
var lastTypingTime;
|
||||
var $currentInput = $usernameInput.focus();
|
||||
|
||||
var socket = io();
|
||||
|
||||
function addParticipantsMessage (data) {
|
||||
var message = '';
|
||||
if (data.numUsers === 1) {
|
||||
message += "there's 1 participant";
|
||||
} else {
|
||||
message += "there are " + data.numUsers + " participants";
|
||||
}
|
||||
log(message);
|
||||
}
|
||||
|
||||
// Sets the client's username
|
||||
function setUsername () {
|
||||
username = cleanInput($usernameInput.val().trim());
|
||||
|
||||
// If the username is valid
|
||||
if (username) {
|
||||
$loginPage.fadeOut();
|
||||
$chatPage.show();
|
||||
$loginPage.off('click');
|
||||
$currentInput = $inputMessage.focus();
|
||||
|
||||
// Tell the server your username
|
||||
socket.emit('add user', username);
|
||||
}
|
||||
}
|
||||
|
||||
// Sends a chat message
|
||||
function sendMessage () {
|
||||
var message = $inputMessage.val();
|
||||
// Prevent markup from being injected into the message
|
||||
message = cleanInput(message);
|
||||
// if there is a non-empty message and a socket connection
|
||||
if (message && connected) {
|
||||
$inputMessage.val('');
|
||||
addChatMessage({
|
||||
username: username,
|
||||
message: message
|
||||
});
|
||||
// tell server to execute 'new message' and send along one parameter
|
||||
socket.emit('new message', message);
|
||||
}
|
||||
}
|
||||
|
||||
// Log a message
|
||||
function log (message, options) {
|
||||
var $el = $('<li>').addClass('log').text(message);
|
||||
addMessageElement($el, options);
|
||||
}
|
||||
|
||||
// Adds the visual chat message to the message list
|
||||
function addChatMessage (data, options) {
|
||||
// Don't fade the message in if there is an 'X was typing'
|
||||
var $typingMessages = getTypingMessages(data);
|
||||
options = options || {};
|
||||
if ($typingMessages.length !== 0) {
|
||||
options.fade = false;
|
||||
$typingMessages.remove();
|
||||
}
|
||||
|
||||
var $usernameDiv = $('<span class="username"/>')
|
||||
.text(data.username)
|
||||
.css('color', getUsernameColor(data.username));
|
||||
var $messageBodyDiv = $('<span class="messageBody">')
|
||||
.text(data.message);
|
||||
|
||||
var typingClass = data.typing ? 'typing' : '';
|
||||
var $messageDiv = $('<li class="message"/>')
|
||||
.data('username', data.username)
|
||||
.addClass(typingClass)
|
||||
.append($usernameDiv, $messageBodyDiv);
|
||||
|
||||
addMessageElement($messageDiv, options);
|
||||
}
|
||||
|
||||
// Adds the visual chat typing message
|
||||
function addChatTyping (data) {
|
||||
data.typing = true;
|
||||
data.message = 'is typing';
|
||||
addChatMessage(data);
|
||||
}
|
||||
|
||||
// Removes the visual chat typing message
|
||||
function removeChatTyping (data) {
|
||||
getTypingMessages(data).fadeOut(function () {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
|
||||
// Adds a message element to the messages and scrolls to the bottom
|
||||
// el - The element to add as a message
|
||||
// options.fade - If the element should fade-in (default = true)
|
||||
// options.prepend - If the element should prepend
|
||||
// all other messages (default = false)
|
||||
function addMessageElement (el, options) {
|
||||
var $el = $(el);
|
||||
|
||||
// Setup default options
|
||||
if (!options) {
|
||||
options = {};
|
||||
}
|
||||
if (typeof options.fade === 'undefined') {
|
||||
options.fade = true;
|
||||
}
|
||||
if (typeof options.prepend === 'undefined') {
|
||||
options.prepend = false;
|
||||
}
|
||||
|
||||
// Apply options
|
||||
if (options.fade) {
|
||||
$el.hide().fadeIn(FADE_TIME);
|
||||
}
|
||||
if (options.prepend) {
|
||||
$messages.prepend($el);
|
||||
} else {
|
||||
$messages.append($el);
|
||||
}
|
||||
$messages[0].scrollTop = $messages[0].scrollHeight;
|
||||
}
|
||||
|
||||
// Prevents input from having injected markup
|
||||
function cleanInput (input) {
|
||||
return $('<div/>').text(input).text();
|
||||
}
|
||||
|
||||
// Updates the typing event
|
||||
function updateTyping () {
|
||||
if (connected) {
|
||||
if (!typing) {
|
||||
typing = true;
|
||||
socket.emit('typing');
|
||||
}
|
||||
lastTypingTime = (new Date()).getTime();
|
||||
|
||||
setTimeout(function () {
|
||||
var typingTimer = (new Date()).getTime();
|
||||
var timeDiff = typingTimer - lastTypingTime;
|
||||
if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
|
||||
socket.emit('stop typing');
|
||||
typing = false;
|
||||
}
|
||||
}, TYPING_TIMER_LENGTH);
|
||||
}
|
||||
}
|
||||
|
||||
// Gets the 'X is typing' messages of a user
|
||||
function getTypingMessages (data) {
|
||||
return $('.typing.message').filter(function (i) {
|
||||
return $(this).data('username') === data.username;
|
||||
});
|
||||
}
|
||||
|
||||
// Gets the color of a username through our hash function
|
||||
function getUsernameColor (username) {
|
||||
// Compute hash code
|
||||
var hash = 7;
|
||||
for (var i = 0; i < username.length; i++) {
|
||||
hash = username.charCodeAt(i) + (hash << 5) - hash;
|
||||
}
|
||||
// Calculate color
|
||||
var index = Math.abs(hash % COLORS.length);
|
||||
return COLORS[index];
|
||||
}
|
||||
|
||||
// Keyboard events
|
||||
|
||||
$window.keydown(function (event) {
|
||||
// Auto-focus the current input when a key is typed
|
||||
if (!(event.ctrlKey || event.metaKey || event.altKey)) {
|
||||
$currentInput.focus();
|
||||
}
|
||||
// When the client hits ENTER on their keyboard
|
||||
if (event.which === 13) {
|
||||
if (username) {
|
||||
sendMessage();
|
||||
socket.emit('stop typing');
|
||||
typing = false;
|
||||
} else {
|
||||
setUsername();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$inputMessage.on('input', function() {
|
||||
updateTyping();
|
||||
});
|
||||
|
||||
// Click events
|
||||
|
||||
// Focus input when clicking anywhere on login page
|
||||
$loginPage.click(function () {
|
||||
$currentInput.focus();
|
||||
});
|
||||
|
||||
// Focus input when clicking on the message input's border
|
||||
$inputMessage.click(function () {
|
||||
$inputMessage.focus();
|
||||
});
|
||||
|
||||
// Socket events
|
||||
|
||||
// Whenever the server emits 'login', log the login message
|
||||
socket.on('login', function (data) {
|
||||
connected = true;
|
||||
// Display the welcome message
|
||||
var message = "Welcome to Socket.IO Chat – ";
|
||||
log(message, {
|
||||
prepend: true
|
||||
});
|
||||
addParticipantsMessage(data);
|
||||
});
|
||||
|
||||
// Whenever the server emits 'new message', update the chat body
|
||||
socket.on('new message', function (data) {
|
||||
addChatMessage(data);
|
||||
});
|
||||
|
||||
// Whenever the server emits 'user joined', log it in the chat body
|
||||
socket.on('user joined', function (data) {
|
||||
log(data.username + ' joined');
|
||||
addParticipantsMessage(data);
|
||||
});
|
||||
|
||||
// Whenever the server emits 'user left', log it in the chat body
|
||||
socket.on('user left', function (data) {
|
||||
log(data.username + ' left');
|
||||
addParticipantsMessage(data);
|
||||
removeChatTyping(data);
|
||||
});
|
||||
|
||||
// Whenever the server emits 'typing', show the typing message
|
||||
socket.on('typing', function (data) {
|
||||
addChatTyping(data);
|
||||
});
|
||||
|
||||
// Whenever the server emits 'stop typing', kill the typing message
|
||||
socket.on('stop typing', function (data) {
|
||||
removeChatTyping(data);
|
||||
});
|
||||
|
||||
socket.on('disconnect', function () {
|
||||
log('you have been disconnected');
|
||||
});
|
||||
|
||||
socket.on('connect', function () {
|
||||
if (username) {
|
||||
log('you have been reconnected');
|
||||
socket.emit('add user', username);
|
||||
}
|
||||
});
|
||||
|
||||
socket.io.on('reconnect_error', function () {
|
||||
log('attempt to reconnect has failed');
|
||||
});
|
||||
|
||||
socket.on('my-name-is', function (serverName) {
|
||||
log('host is now ' + serverName);
|
||||
})
|
||||
|
||||
});
|
||||
149
examples/cluster-traefik/server/public/style.css
Normal file
149
examples/cluster-traefik/server/public/style.css
Normal file
@@ -0,0 +1,149 @@
|
||||
/* Fix user-agent */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
html, input {
|
||||
font-family:
|
||||
"HelveticaNeue-Light",
|
||||
"Helvetica Neue Light",
|
||||
"Helvetica Neue",
|
||||
Helvetica,
|
||||
Arial,
|
||||
"Lucida Grande",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Pages */
|
||||
|
||||
.pages {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Login Page */
|
||||
|
||||
.login.page {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.login.page .form {
|
||||
height: 100px;
|
||||
margin-top: -100px;
|
||||
position: absolute;
|
||||
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login.page .form .usernameInput {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid #fff;
|
||||
outline: none;
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.login.page .title {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
.login.page .usernameInput {
|
||||
font-size: 200%;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.login.page .title, .login.page .usernameInput {
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
/* Chat page */
|
||||
|
||||
.chat.page {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Font */
|
||||
|
||||
.messages {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.inputMessage {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.log {
|
||||
color: gray;
|
||||
font-size: 70%;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
|
||||
.chatArea {
|
||||
height: 100%;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.messages {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-y: scroll;
|
||||
padding: 10px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.message.typing .messageBody {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
padding-right: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
|
||||
.inputMessage {
|
||||
border: 10px solid #000;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
left: 0;
|
||||
outline: none;
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
10
examples/cluster-traefik/traefik.yml
Normal file
10
examples/cluster-traefik/traefik.yml
Normal file
@@ -0,0 +1,10 @@
|
||||
|
||||
api:
|
||||
insecure: true
|
||||
|
||||
entryPoints:
|
||||
web:
|
||||
address: ":80"
|
||||
|
||||
providers:
|
||||
docker: {}
|
||||
24
examples/private-messaging/.gitignore
vendored
Normal file
24
examples/private-messaging/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
package-lock.json
|
||||
23
examples/private-messaging/README.md
Normal file
23
examples/private-messaging/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Private messaging with Socket.IO
|
||||
|
||||
Please read the related guide:
|
||||
|
||||
- [Part I](https://socket.io/get-started/private-messaging-part-1/): initial implementation
|
||||
- [Part II](https://socket.io/get-started/private-messaging-part-2/): persistent user ID
|
||||
- [Part III](https://socket.io/get-started/private-messaging-part-3/): persistent messages
|
||||
- [Part IV](https://socket.io/get-started/private-messaging-part-4/): scaling up
|
||||
|
||||
## Running the frontend
|
||||
|
||||
```
|
||||
npm install
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Running the server
|
||||
|
||||
```
|
||||
cd server
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
5
examples/private-messaging/babel.config.js
Normal file
5
examples/private-messaging/babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
43
examples/private-messaging/package.json
Normal file
43
examples/private-messaging/package.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "private-messaging",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"socket.io-client": "^3.1.1",
|
||||
"vue": "^2.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
BIN
examples/private-messaging/public/favicon.ico
Normal file
BIN
examples/private-messaging/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
examples/private-messaging/public/fonts/Lato-Regular.ttf
Normal file
BIN
examples/private-messaging/public/fonts/Lato-Regular.ttf
Normal file
Binary file not shown.
17
examples/private-messaging/public/index.html
Normal file
17
examples/private-messaging/public/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>Private messaging with Socket.IO</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but this application doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
31
examples/private-messaging/server/cluster.js
Normal file
31
examples/private-messaging/server/cluster.js
Normal file
@@ -0,0 +1,31 @@
|
||||
const cluster = require("cluster");
|
||||
const http = require("http");
|
||||
const { setupMaster } = require("@socket.io/sticky");
|
||||
|
||||
const WORKERS_COUNT = 4;
|
||||
|
||||
if (cluster.isMaster) {
|
||||
console.log(`Master ${process.pid} is running`);
|
||||
|
||||
for (let i = 0; i < WORKERS_COUNT; i++) {
|
||||
cluster.fork();
|
||||
}
|
||||
|
||||
cluster.on("exit", (worker) => {
|
||||
console.log(`Worker ${worker.process.pid} died`);
|
||||
cluster.fork();
|
||||
});
|
||||
|
||||
const httpServer = http.createServer();
|
||||
setupMaster(httpServer, {
|
||||
loadBalancingMethod: "least-connection", // either "random", "round-robin" or "least-connection"
|
||||
});
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
httpServer.listen(PORT, () =>
|
||||
console.log(`server listening at http://localhost:${PORT}`)
|
||||
);
|
||||
} else {
|
||||
console.log(`Worker ${process.pid} started`);
|
||||
require("./index");
|
||||
}
|
||||
7
examples/private-messaging/server/docker-compose.yml
Normal file
7
examples/private-messaging/server/docker-compose.yml
Normal file
@@ -0,0 +1,7 @@
|
||||
version: "3"
|
||||
|
||||
services:
|
||||
redis:
|
||||
image: redis:5
|
||||
ports:
|
||||
- "6379:6379"
|
||||
125
examples/private-messaging/server/index.js
Normal file
125
examples/private-messaging/server/index.js
Normal file
@@ -0,0 +1,125 @@
|
||||
const httpServer = require("http").createServer();
|
||||
const Redis = require("ioredis");
|
||||
const redisClient = new Redis();
|
||||
const io = require("socket.io")(httpServer, {
|
||||
cors: {
|
||||
origin: "http://localhost:8080",
|
||||
},
|
||||
adapter: require("socket.io-redis")({
|
||||
pubClient: redisClient,
|
||||
subClient: redisClient.duplicate(),
|
||||
}),
|
||||
});
|
||||
|
||||
const { setupWorker } = require("@socket.io/sticky");
|
||||
const crypto = require("crypto");
|
||||
const randomId = () => crypto.randomBytes(8).toString("hex");
|
||||
|
||||
const { RedisSessionStore } = require("./sessionStore");
|
||||
const sessionStore = new RedisSessionStore(redisClient);
|
||||
|
||||
const { RedisMessageStore } = require("./messageStore");
|
||||
const messageStore = new RedisMessageStore(redisClient);
|
||||
|
||||
io.use(async (socket, next) => {
|
||||
const sessionID = socket.handshake.auth.sessionID;
|
||||
if (sessionID) {
|
||||
const session = await sessionStore.findSession(sessionID);
|
||||
if (session) {
|
||||
socket.sessionID = sessionID;
|
||||
socket.userID = session.userID;
|
||||
socket.username = session.username;
|
||||
return next();
|
||||
}
|
||||
}
|
||||
const username = socket.handshake.auth.username;
|
||||
if (!username) {
|
||||
return next(new Error("invalid username"));
|
||||
}
|
||||
socket.sessionID = randomId();
|
||||
socket.userID = randomId();
|
||||
socket.username = username;
|
||||
next();
|
||||
});
|
||||
|
||||
io.on("connection", async (socket) => {
|
||||
// persist session
|
||||
sessionStore.saveSession(socket.sessionID, {
|
||||
userID: socket.userID,
|
||||
username: socket.username,
|
||||
connected: true,
|
||||
});
|
||||
|
||||
// emit session details
|
||||
socket.emit("session", {
|
||||
sessionID: socket.sessionID,
|
||||
userID: socket.userID,
|
||||
});
|
||||
|
||||
// join the "userID" room
|
||||
socket.join(socket.userID);
|
||||
|
||||
// fetch existing users
|
||||
const users = [];
|
||||
const [messages, sessions] = await Promise.all([
|
||||
messageStore.findMessagesForUser(socket.userID),
|
||||
sessionStore.findAllSessions(),
|
||||
]);
|
||||
const messagesPerUser = new Map();
|
||||
messages.forEach((message) => {
|
||||
const { from, to } = message;
|
||||
const otherUser = socket.userID === from ? to : from;
|
||||
if (messagesPerUser.has(otherUser)) {
|
||||
messagesPerUser.get(otherUser).push(message);
|
||||
} else {
|
||||
messagesPerUser.set(otherUser, [message]);
|
||||
}
|
||||
});
|
||||
|
||||
sessions.forEach((session) => {
|
||||
users.push({
|
||||
userID: session.userID,
|
||||
username: session.username,
|
||||
connected: session.connected,
|
||||
messages: messagesPerUser.get(session.userID) || [],
|
||||
});
|
||||
});
|
||||
socket.emit("users", users);
|
||||
|
||||
// notify existing users
|
||||
socket.broadcast.emit("user connected", {
|
||||
userID: socket.userID,
|
||||
username: socket.username,
|
||||
connected: true,
|
||||
messages: [],
|
||||
});
|
||||
|
||||
// forward the private message to the right recipient (and to other tabs of the sender)
|
||||
socket.on("private message", ({ content, to }) => {
|
||||
const message = {
|
||||
content,
|
||||
from: socket.userID,
|
||||
to,
|
||||
};
|
||||
socket.to(to).to(socket.userID).emit("private message", message);
|
||||
messageStore.saveMessage(message);
|
||||
});
|
||||
|
||||
// notify users upon disconnection
|
||||
socket.on("disconnect", async () => {
|
||||
const matchingSockets = await io.in(socket.userID).allSockets();
|
||||
const isDisconnected = matchingSockets.size === 0;
|
||||
if (isDisconnected) {
|
||||
// notify other users
|
||||
socket.broadcast.emit("user disconnected", socket.userID);
|
||||
// update the connection status of the session
|
||||
sessionStore.saveSession(socket.sessionID, {
|
||||
userID: socket.userID,
|
||||
username: socket.username,
|
||||
connected: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setupWorker(io);
|
||||
54
examples/private-messaging/server/messageStore.js
Normal file
54
examples/private-messaging/server/messageStore.js
Normal file
@@ -0,0 +1,54 @@
|
||||
/* abstract */ class MessageStore {
|
||||
saveMessage(message) {}
|
||||
findMessagesForUser(userID) {}
|
||||
}
|
||||
|
||||
class InMemoryMessageStore extends MessageStore {
|
||||
constructor() {
|
||||
super();
|
||||
this.messages = [];
|
||||
}
|
||||
|
||||
saveMessage(message) {
|
||||
this.messages.push(message);
|
||||
}
|
||||
|
||||
findMessagesForUser(userID) {
|
||||
return this.messages.filter(
|
||||
({ from, to }) => from === userID || to === userID
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const CONVERSATION_TTL = 24 * 60 * 60;
|
||||
|
||||
class RedisMessageStore extends MessageStore {
|
||||
constructor(redisClient) {
|
||||
super();
|
||||
this.redisClient = redisClient;
|
||||
}
|
||||
|
||||
saveMessage(message) {
|
||||
const value = JSON.stringify(message);
|
||||
this.redisClient
|
||||
.multi()
|
||||
.rpush(`messages:${message.from}`, value)
|
||||
.rpush(`messages:${message.to}`, value)
|
||||
.expire(`messages:${message.from}`, CONVERSATION_TTL)
|
||||
.expire(`messages:${message.to}`, CONVERSATION_TTL)
|
||||
.exec();
|
||||
}
|
||||
|
||||
findMessagesForUser(userID) {
|
||||
return this.redisClient
|
||||
.lrange(`messages:${userID}`, 0, -1)
|
||||
.then((results) => {
|
||||
return results.map((result) => JSON.parse(result));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
InMemoryMessageStore,
|
||||
RedisMessageStore,
|
||||
};
|
||||
17
examples/private-messaging/server/package.json
Normal file
17
examples/private-messaging/server/package.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "server",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node cluster.js"
|
||||
},
|
||||
"author": "Damien Arrachequesne <damien.arrachequesne@gmail.com>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@socket.io/sticky": "^1.0.0",
|
||||
"ioredis": "^4.22.0",
|
||||
"socket.io": "^3.1.1",
|
||||
"socket.io-redis": "^6.0.1"
|
||||
}
|
||||
}
|
||||
89
examples/private-messaging/server/sessionStore.js
Normal file
89
examples/private-messaging/server/sessionStore.js
Normal file
@@ -0,0 +1,89 @@
|
||||
/* abstract */ class SessionStore {
|
||||
findSession(id) {}
|
||||
saveSession(id, session) {}
|
||||
findAllSessions() {}
|
||||
}
|
||||
|
||||
class InMemorySessionStore extends SessionStore {
|
||||
constructor() {
|
||||
super();
|
||||
this.sessions = new Map();
|
||||
}
|
||||
|
||||
findSession(id) {
|
||||
return this.sessions.get(id);
|
||||
}
|
||||
|
||||
saveSession(id, session) {
|
||||
this.sessions.set(id, session);
|
||||
}
|
||||
|
||||
findAllSessions() {
|
||||
return [...this.sessions.values()];
|
||||
}
|
||||
}
|
||||
|
||||
const SESSION_TTL = 24 * 60 * 60;
|
||||
const mapSession = ([userID, username, connected]) =>
|
||||
userID ? { userID, username, connected: connected === "true" } : undefined;
|
||||
|
||||
class RedisSessionStore extends SessionStore {
|
||||
constructor(redisClient) {
|
||||
super();
|
||||
this.redisClient = redisClient;
|
||||
}
|
||||
|
||||
findSession(id) {
|
||||
return this.redisClient
|
||||
.hmget(`session:${id}`, "userID", "username", "connected")
|
||||
.then(mapSession);
|
||||
}
|
||||
|
||||
saveSession(id, { userID, username, connected }) {
|
||||
this.redisClient
|
||||
.multi()
|
||||
.hset(
|
||||
`session:${id}`,
|
||||
"userID",
|
||||
userID,
|
||||
"username",
|
||||
username,
|
||||
"connected",
|
||||
connected
|
||||
)
|
||||
.expire(`session:${id}`, SESSION_TTL)
|
||||
.exec();
|
||||
}
|
||||
|
||||
async findAllSessions() {
|
||||
const keys = new Set();
|
||||
let nextIndex = 0;
|
||||
do {
|
||||
const [nextIndexAsStr, results] = await this.redisClient.scan(
|
||||
nextIndex,
|
||||
"MATCH",
|
||||
"session:*",
|
||||
"COUNT",
|
||||
"100"
|
||||
);
|
||||
nextIndex = parseInt(nextIndexAsStr, 10);
|
||||
results.forEach((s) => keys.add(s));
|
||||
} while (nextIndex !== 0);
|
||||
const commands = [];
|
||||
keys.forEach((key) => {
|
||||
commands.push(["hmget", key, "userID", "username", "connected"]);
|
||||
});
|
||||
return this.redisClient
|
||||
.multi(commands)
|
||||
.exec()
|
||||
.then((results) => {
|
||||
return results
|
||||
.map(([err, session]) => (err ? undefined : mapSession(session)))
|
||||
.filter((v) => !!v);
|
||||
});
|
||||
}
|
||||
}
|
||||
module.exports = {
|
||||
InMemorySessionStore,
|
||||
RedisSessionStore,
|
||||
};
|
||||
78
examples/private-messaging/src/App.vue
Normal file
78
examples/private-messaging/src/App.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<select-username
|
||||
v-if="!usernameAlreadySelected"
|
||||
@input="onUsernameSelection"
|
||||
/>
|
||||
<chat v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectUsername from "./components/SelectUsername";
|
||||
import Chat from "./components/Chat";
|
||||
import socket from "./socket";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
Chat,
|
||||
SelectUsername,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
usernameAlreadySelected: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onUsernameSelection(username) {
|
||||
this.usernameAlreadySelected = true;
|
||||
socket.auth = { username };
|
||||
socket.connect();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const sessionID = localStorage.getItem("sessionID");
|
||||
|
||||
if (sessionID) {
|
||||
this.usernameAlreadySelected = true;
|
||||
socket.auth = { sessionID };
|
||||
socket.connect();
|
||||
}
|
||||
|
||||
socket.on("session", ({ sessionID, userID }) => {
|
||||
// attach the session ID to the next reconnection attempts
|
||||
socket.auth = { sessionID };
|
||||
// store it in the localStorage
|
||||
localStorage.setItem("sessionID", sessionID);
|
||||
// save the ID of the user
|
||||
socket.userID = userID;
|
||||
});
|
||||
|
||||
socket.on("connect_error", (err) => {
|
||||
if (err.message === "invalid username") {
|
||||
this.usernameAlreadySelected = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
destroyed() {
|
||||
socket.off("connect_error");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url("/fonts/Lato-Regular.ttf");
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Lato, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
165
examples/private-messaging/src/components/Chat.vue
Normal file
165
examples/private-messaging/src/components/Chat.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="left-panel">
|
||||
<user
|
||||
v-for="user in users"
|
||||
:key="user.userID"
|
||||
:user="user"
|
||||
:selected="selectedUser === user"
|
||||
@select="onSelectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
<message-panel
|
||||
v-if="selectedUser"
|
||||
:user="selectedUser"
|
||||
@input="onMessage"
|
||||
class="right-panel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import socket from "../socket";
|
||||
import User from "./User";
|
||||
import MessagePanel from "./MessagePanel";
|
||||
|
||||
export default {
|
||||
name: "Chat",
|
||||
components: { User, MessagePanel },
|
||||
data() {
|
||||
return {
|
||||
selectedUser: null,
|
||||
users: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onMessage(content) {
|
||||
if (this.selectedUser) {
|
||||
socket.emit("private message", {
|
||||
content,
|
||||
to: this.selectedUser.userID,
|
||||
});
|
||||
this.selectedUser.messages.push({
|
||||
content,
|
||||
fromSelf: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
onSelectUser(user) {
|
||||
this.selectedUser = user;
|
||||
user.hasNewMessages = false;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
socket.on("connect", () => {
|
||||
this.users.forEach((user) => {
|
||||
if (user.self) {
|
||||
user.connected = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
socket.on("disconnect", () => {
|
||||
this.users.forEach((user) => {
|
||||
if (user.self) {
|
||||
user.connected = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const initReactiveProperties = (user) => {
|
||||
user.hasNewMessages = false;
|
||||
};
|
||||
|
||||
socket.on("users", (users) => {
|
||||
users.forEach((user) => {
|
||||
user.messages.forEach((message) => {
|
||||
message.fromSelf = message.from === socket.userID;
|
||||
});
|
||||
for (let i = 0; i < this.users.length; i++) {
|
||||
const existingUser = this.users[i];
|
||||
if (existingUser.userID === user.userID) {
|
||||
existingUser.connected = user.connected;
|
||||
existingUser.messages = user.messages;
|
||||
return;
|
||||
}
|
||||
}
|
||||
user.self = user.userID === socket.userID;
|
||||
initReactiveProperties(user);
|
||||
this.users.push(user);
|
||||
});
|
||||
// put the current user first, and sort by username
|
||||
this.users.sort((a, b) => {
|
||||
if (a.self) return -1;
|
||||
if (b.self) return 1;
|
||||
if (a.username < b.username) return -1;
|
||||
return a.username > b.username ? 1 : 0;
|
||||
});
|
||||
});
|
||||
|
||||
socket.on("user connected", (user) => {
|
||||
for (let i = 0; i < this.users.length; i++) {
|
||||
const existingUser = this.users[i];
|
||||
if (existingUser.userID === user.userID) {
|
||||
existingUser.connected = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
initReactiveProperties(user);
|
||||
this.users.push(user);
|
||||
});
|
||||
|
||||
socket.on("user disconnected", (id) => {
|
||||
for (let i = 0; i < this.users.length; i++) {
|
||||
const user = this.users[i];
|
||||
if (user.userID === id) {
|
||||
user.connected = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("private message", ({ content, from, to }) => {
|
||||
for (let i = 0; i < this.users.length; i++) {
|
||||
const user = this.users[i];
|
||||
const fromSelf = socket.userID === from;
|
||||
if (user.userID === (fromSelf ? to : from)) {
|
||||
user.messages.push({
|
||||
content,
|
||||
fromSelf,
|
||||
});
|
||||
if (user !== this.selectedUser) {
|
||||
user.hasNewMessages = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
destroyed() {
|
||||
socket.off("connect");
|
||||
socket.off("disconnect");
|
||||
socket.off("users");
|
||||
socket.off("user connected");
|
||||
socket.off("user disconnected");
|
||||
socket.off("private message");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 260px;
|
||||
overflow-x: hidden;
|
||||
background-color: #3f0e40;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
margin-left: 260px;
|
||||
}
|
||||
</style>
|
||||
101
examples/private-messaging/src/components/MessagePanel.vue
Normal file
101
examples/private-messaging/src/components/MessagePanel.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header">
|
||||
<status-icon :connected="user.connected" />{{ user.username }}
|
||||
</div>
|
||||
|
||||
<ul class="messages">
|
||||
<li
|
||||
v-for="(message, index) in user.messages"
|
||||
:key="index"
|
||||
class="message"
|
||||
>
|
||||
<div v-if="displaySender(message, index)" class="sender">
|
||||
{{ message.fromSelf ? "(yourself)" : user.username }}
|
||||
</div>
|
||||
{{ message.content }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<form @submit.prevent="onSubmit" class="form">
|
||||
<textarea v-model="input" placeholder="Your message..." class="input" />
|
||||
<button :disabled="!isValid" class="send-button">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StatusIcon from "./StatusIcon";
|
||||
|
||||
export default {
|
||||
name: "MessagePanel",
|
||||
components: {
|
||||
StatusIcon,
|
||||
},
|
||||
props: {
|
||||
user: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$emit("input", this.input);
|
||||
this.input = "";
|
||||
},
|
||||
displaySender(message, index) {
|
||||
return (
|
||||
index === 0 ||
|
||||
this.user.messages[index - 1].fromSelf !==
|
||||
this.user.messages[index].fromSelf
|
||||
);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isValid() {
|
||||
return this.input.length > 0;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
line-height: 40px;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sender {
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.form {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 80%;
|
||||
resize: none;
|
||||
padding: 10px;
|
||||
line-height: 1.5;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
36
examples/private-messaging/src/components/SelectUsername.vue
Normal file
36
examples/private-messaging/src/components/SelectUsername.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="select-username">
|
||||
<form @submit.prevent="onSubmit">
|
||||
<input v-model="username" placeholder="Your username..." />
|
||||
<button :disabled="!isValid">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SelectUsername",
|
||||
data() {
|
||||
return {
|
||||
username: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isValid() {
|
||||
return this.username.length > 2;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$emit("input", this.username);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.select-username {
|
||||
width: 300px;
|
||||
margin: 200px auto 0;
|
||||
}
|
||||
</style>
|
||||
27
examples/private-messaging/src/components/StatusIcon.vue
Normal file
27
examples/private-messaging/src/components/StatusIcon.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<i class="icon" :class="{ connected: connected }"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "StatusIcon",
|
||||
props: {
|
||||
connected: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
background-color: #e38968;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.icon.connected {
|
||||
background-color: #86bb71;
|
||||
}
|
||||
</style>
|
||||
63
examples/private-messaging/src/components/User.vue
Normal file
63
examples/private-messaging/src/components/User.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="user" @click="onClick" :class="{ selected: selected }">
|
||||
<div class="description">
|
||||
<div class="name">
|
||||
{{ user.username }} {{ user.self ? " (yourself)" : "" }}
|
||||
</div>
|
||||
<div class="status">
|
||||
<status-icon :connected="user.connected" />{{ status }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user.hasNewMessages" class="new-messages">!</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StatusIcon from "./StatusIcon";
|
||||
export default {
|
||||
name: "User",
|
||||
components: { StatusIcon },
|
||||
props: {
|
||||
user: Object,
|
||||
selected: Boolean,
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit("select");
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
status() {
|
||||
return this.user.connected ? "online" : "offline";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.selected {
|
||||
background-color: #1164a3;
|
||||
}
|
||||
|
||||
.user {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #92959e;
|
||||
}
|
||||
|
||||
.new-messages {
|
||||
color: white;
|
||||
background-color: red;
|
||||
width: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
8
examples/private-messaging/src/main.js
Normal file
8
examples/private-messaging/src/main.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
10
examples/private-messaging/src/socket.js
Normal file
10
examples/private-messaging/src/socket.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import { io } from "socket.io-client";
|
||||
|
||||
const URL = "http://localhost:3000";
|
||||
const socket = io(URL, { autoConnect: false });
|
||||
|
||||
socket.onAny((event, ...args) => {
|
||||
console.log(event, args);
|
||||
});
|
||||
|
||||
export default socket;
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Decoder, Encoder, Packet, PacketType } from "socket.io-parser";
|
||||
import debugModule = require("debug");
|
||||
import url = require("url");
|
||||
import type { IncomingMessage } from "http";
|
||||
import type { Namespace, Server } from "./index";
|
||||
import type { Socket } from "./socket";
|
||||
@@ -77,7 +78,7 @@ export class Client {
|
||||
* @param {Object} auth - the auth parameters
|
||||
* @private
|
||||
*/
|
||||
private connect(name: string, auth: object = {}) {
|
||||
private connect(name: string, auth: object = {}): void {
|
||||
if (this.server._nsps.has(name)) {
|
||||
debug("connecting to namespace %s", name);
|
||||
return this.doConnect(name, auth);
|
||||
@@ -112,7 +113,7 @@ export class Client {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private doConnect(name: string, auth: object) {
|
||||
private doConnect(name: string, auth: object): void {
|
||||
const nsp = this.server.of(name);
|
||||
|
||||
const socket = nsp._add(this, auth, () => {
|
||||
@@ -131,7 +132,7 @@ export class Client {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_disconnect() {
|
||||
_disconnect(): void {
|
||||
for (const socket of this.sockets.values()) {
|
||||
socket.disconnect();
|
||||
}
|
||||
@@ -144,7 +145,7 @@ export class Client {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_remove(socket: Socket) {
|
||||
_remove(socket: Socket): void {
|
||||
if (this.sockets.has(socket.id)) {
|
||||
const nsp = this.sockets.get(socket.id)!.nsp.name;
|
||||
this.sockets.delete(socket.id);
|
||||
@@ -159,7 +160,7 @@ export class Client {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private close() {
|
||||
private close(): void {
|
||||
if ("open" === this.conn.readyState) {
|
||||
debug("forcing transport close");
|
||||
this.conn.close();
|
||||
@@ -174,12 +175,13 @@ export class Client {
|
||||
* @param {Object} opts
|
||||
* @private
|
||||
*/
|
||||
_packet(packet, opts?) {
|
||||
_packet(packet: Packet, opts?: any): void {
|
||||
opts = opts || {};
|
||||
const self = this;
|
||||
|
||||
// this writes to the actual connection
|
||||
function writeToEngine(encodedPackets) {
|
||||
function writeToEngine(encodedPackets: any) {
|
||||
// TODO clarify this.
|
||||
if (opts.volatile && !self.conn.transport.writable) return;
|
||||
for (let i = 0; i < encodedPackets.length; i++) {
|
||||
self.conn.write(encodedPackets[i], { compress: opts.compress });
|
||||
@@ -205,7 +207,7 @@ export class Client {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private ondata(data) {
|
||||
private ondata(data): void {
|
||||
// try/catch is needed for protocol violations (GH-1880)
|
||||
try {
|
||||
this.decoder.add(data);
|
||||
@@ -219,9 +221,14 @@ export class Client {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private ondecoded(packet: Packet) {
|
||||
private ondecoded(packet: Packet): void {
|
||||
if (PacketType.CONNECT === packet.type) {
|
||||
this.connect(packet.nsp, packet.data);
|
||||
if (this.conn.protocol === 3) {
|
||||
const parsed = url.parse(packet.nsp, true);
|
||||
this.connect(parsed.pathname!, parsed.query);
|
||||
} else {
|
||||
this.connect(packet.nsp, packet.data);
|
||||
}
|
||||
} else {
|
||||
const socket = this.nsps.get(packet.nsp);
|
||||
if (socket) {
|
||||
@@ -240,7 +247,7 @@ export class Client {
|
||||
* @param {Object} err object
|
||||
* @private
|
||||
*/
|
||||
private onerror(err) {
|
||||
private onerror(err): void {
|
||||
for (const socket of this.sockets.values()) {
|
||||
socket._onerror(err);
|
||||
}
|
||||
@@ -253,7 +260,7 @@ export class Client {
|
||||
* @param reason
|
||||
* @private
|
||||
*/
|
||||
private onclose(reason: string) {
|
||||
private onclose(reason: string): void {
|
||||
debug("client close with reason %s", reason);
|
||||
|
||||
// ignore a potential subsequent `close` event
|
||||
@@ -272,7 +279,7 @@ export class Client {
|
||||
* Cleans up event listeners.
|
||||
* @private
|
||||
*/
|
||||
private destroy() {
|
||||
private destroy(): void {
|
||||
this.conn.removeListener("data", this.ondata);
|
||||
this.conn.removeListener("error", this.onerror);
|
||||
this.conn.removeListener("close", this.onclose);
|
||||
|
||||
71
lib/index.ts
71
lib/index.ts
@@ -25,7 +25,7 @@ const dotMapRegex = /\.map/;
|
||||
type Transport = "polling" | "websocket";
|
||||
type ParentNspNameMatchFn = (
|
||||
name: string,
|
||||
query: object,
|
||||
auth: { [key: string]: any },
|
||||
fn: (err: Error | null, success: boolean) => void
|
||||
) => void;
|
||||
|
||||
@@ -191,6 +191,10 @@ export class Server extends EventEmitter {
|
||||
*/
|
||||
constructor(opts?: Partial<ServerOptions>);
|
||||
constructor(srv?: http.Server | number, opts?: Partial<ServerOptions>);
|
||||
constructor(
|
||||
srv: undefined | Partial<ServerOptions> | http.Server | number,
|
||||
opts?: Partial<ServerOptions>
|
||||
);
|
||||
constructor(
|
||||
srv: undefined | Partial<ServerOptions> | http.Server | number,
|
||||
opts: Partial<ServerOptions> = {}
|
||||
@@ -222,9 +226,10 @@ export class Server extends EventEmitter {
|
||||
* @return self when setting or value when getting
|
||||
* @public
|
||||
*/
|
||||
public serveClient(v: boolean): Server;
|
||||
public serveClient(v: boolean): this;
|
||||
public serveClient(): boolean;
|
||||
public serveClient(v?: boolean): Server | boolean {
|
||||
public serveClient(v?: boolean): this | boolean;
|
||||
public serveClient(v?: boolean): this | boolean {
|
||||
if (!arguments.length) return this._serveClient;
|
||||
this._serveClient = v!;
|
||||
return this;
|
||||
@@ -234,16 +239,16 @@ export class Server extends EventEmitter {
|
||||
* Executes the middleware for an incoming namespace not already created on the server.
|
||||
*
|
||||
* @param name - name of incoming namespace
|
||||
* @param {Object} auth - the auth parameters
|
||||
* @param auth - the auth parameters
|
||||
* @param fn - callback
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_checkNamespace(
|
||||
name: string,
|
||||
auth: object,
|
||||
auth: { [key: string]: any },
|
||||
fn: (nsp: Namespace | false) => void
|
||||
) {
|
||||
): void {
|
||||
if (this.parentNsps.size === 0) return fn(false);
|
||||
|
||||
const keysIterator = this.parentNsps.keys();
|
||||
@@ -272,9 +277,10 @@ export class Server extends EventEmitter {
|
||||
* @return {Server|String} self when setting or value when getting
|
||||
* @public
|
||||
*/
|
||||
public path(v: string): Server;
|
||||
public path(v: string): this;
|
||||
public path(): string;
|
||||
public path(v?: string): Server | string {
|
||||
public path(v?: string): this | string;
|
||||
public path(v?: string): this | string {
|
||||
if (!arguments.length) return this._path;
|
||||
|
||||
this._path = v!.replace(/\/$/, "");
|
||||
@@ -293,9 +299,10 @@ export class Server extends EventEmitter {
|
||||
* @param v
|
||||
* @public
|
||||
*/
|
||||
public connectTimeout(v: number): Server;
|
||||
public connectTimeout(v: number): this;
|
||||
public connectTimeout(): number;
|
||||
public connectTimeout(v?: number): Server | number {
|
||||
public connectTimeout(v?: number): this | number;
|
||||
public connectTimeout(v?: number): this | number {
|
||||
if (v === undefined) return this._connectTimeout;
|
||||
this._connectTimeout = v;
|
||||
return this;
|
||||
@@ -309,8 +316,9 @@ export class Server extends EventEmitter {
|
||||
* @public
|
||||
*/
|
||||
public adapter(): typeof Adapter | undefined;
|
||||
public adapter(v: typeof Adapter): Server;
|
||||
public adapter(v?: typeof Adapter): typeof Adapter | undefined | Server {
|
||||
public adapter(v: typeof Adapter): this;
|
||||
public adapter(v?: typeof Adapter): typeof Adapter | undefined | this;
|
||||
public adapter(v?: typeof Adapter): typeof Adapter | undefined | this {
|
||||
if (!arguments.length) return this._adapter;
|
||||
this._adapter = v;
|
||||
for (const nsp of this._nsps.values()) {
|
||||
@@ -330,7 +338,7 @@ export class Server extends EventEmitter {
|
||||
public listen(
|
||||
srv: http.Server | number,
|
||||
opts: Partial<ServerOptions> = {}
|
||||
): Server {
|
||||
): this {
|
||||
return this.attach(srv, opts);
|
||||
}
|
||||
|
||||
@@ -345,7 +353,7 @@ export class Server extends EventEmitter {
|
||||
public attach(
|
||||
srv: http.Server | number,
|
||||
opts: Partial<ServerOptions> = {}
|
||||
): Server {
|
||||
): this {
|
||||
if ("function" == typeof srv) {
|
||||
const msg =
|
||||
"You are trying to attach socket.io to an express " +
|
||||
@@ -385,7 +393,10 @@ export class Server extends EventEmitter {
|
||||
* @param opts - options passed to engine.io
|
||||
* @private
|
||||
*/
|
||||
private initEngine(srv: http.Server, opts: Partial<EngineAttachOptions>) {
|
||||
private initEngine(
|
||||
srv: http.Server,
|
||||
opts: Partial<EngineAttachOptions>
|
||||
): void {
|
||||
// initialize engine
|
||||
debug("creating engine.io instance with opts %j", opts);
|
||||
this.eio = engine.attach(srv, opts);
|
||||
@@ -406,7 +417,7 @@ export class Server extends EventEmitter {
|
||||
* @param srv http server
|
||||
* @private
|
||||
*/
|
||||
private attachServe(srv: http.Server) {
|
||||
private attachServe(srv: http.Server): void {
|
||||
debug("attaching client serving req handler");
|
||||
|
||||
const evs = srv.listeners("request").slice(0);
|
||||
@@ -429,7 +440,7 @@ export class Server extends EventEmitter {
|
||||
* @param res
|
||||
* @private
|
||||
*/
|
||||
private serve(req: http.IncomingMessage, res: http.ServerResponse) {
|
||||
private serve(req: http.IncomingMessage, res: http.ServerResponse): void {
|
||||
const filename = req.url!.replace(this._path, "");
|
||||
const isMap = dotMapRegex.test(filename);
|
||||
const type = isMap ? "map" : "source";
|
||||
@@ -474,7 +485,7 @@ export class Server extends EventEmitter {
|
||||
filename: string,
|
||||
req: http.IncomingMessage,
|
||||
res: http.ServerResponse
|
||||
) {
|
||||
): void {
|
||||
const readStream = createReadStream(
|
||||
path.join(__dirname, "../client-dist/", filename)
|
||||
);
|
||||
@@ -513,7 +524,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public bind(engine): Server {
|
||||
public bind(engine): this {
|
||||
this.engine = engine;
|
||||
this.engine.on("connection", this.onconnection.bind(this));
|
||||
return this;
|
||||
@@ -526,7 +537,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @private
|
||||
*/
|
||||
private onconnection(conn): Server {
|
||||
private onconnection(conn): this {
|
||||
debug("incoming connection with id %s", conn.id);
|
||||
const client = new Client(this, conn);
|
||||
if (conn.protocol === 3) {
|
||||
@@ -540,13 +551,13 @@ export class Server extends EventEmitter {
|
||||
* Looks up a namespace.
|
||||
*
|
||||
* @param {String|RegExp|Function} name nsp name
|
||||
* @param [fn] optional, nsp `connection` ev handler
|
||||
* @param fn optional, nsp `connection` ev handler
|
||||
* @public
|
||||
*/
|
||||
public of(
|
||||
name: string | RegExp | ParentNspNameMatchFn,
|
||||
fn?: (socket: Socket) => void
|
||||
) {
|
||||
): Namespace {
|
||||
if (typeof name === "function" || name instanceof RegExp) {
|
||||
const parentNsp = new ParentNamespace(this);
|
||||
debug("initializing parent namespace %s", parentNsp.name);
|
||||
@@ -605,7 +616,7 @@ export class Server extends EventEmitter {
|
||||
*/
|
||||
public use(
|
||||
fn: (socket: Socket, next: (err?: ExtendedError) => void) => void
|
||||
): Server {
|
||||
): this {
|
||||
this.sockets.use(fn);
|
||||
return this;
|
||||
}
|
||||
@@ -617,7 +628,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public to(name: Room): Server {
|
||||
public to(name: Room): this {
|
||||
this.sockets.to(name);
|
||||
return this;
|
||||
}
|
||||
@@ -629,7 +640,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public in(name: Room): Server {
|
||||
public in(name: Room): this {
|
||||
this.sockets.in(name);
|
||||
return this;
|
||||
}
|
||||
@@ -640,7 +651,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public send(...args: readonly any[]): Server {
|
||||
public send(...args: readonly any[]): this {
|
||||
this.sockets.emit("message", ...args);
|
||||
return this;
|
||||
}
|
||||
@@ -651,7 +662,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public write(...args: readonly any[]): Server {
|
||||
public write(...args: readonly any[]): this {
|
||||
this.sockets.emit("message", ...args);
|
||||
return this;
|
||||
}
|
||||
@@ -672,7 +683,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public compress(compress: boolean): Server {
|
||||
public compress(compress: boolean): this {
|
||||
this.sockets.compress(compress);
|
||||
return this;
|
||||
}
|
||||
@@ -685,7 +696,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public get volatile(): Server {
|
||||
public get volatile(): this {
|
||||
this.sockets.volatile;
|
||||
return this;
|
||||
}
|
||||
@@ -696,7 +707,7 @@ export class Server extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public get local(): Server {
|
||||
public get local(): this {
|
||||
this.sockets.local;
|
||||
return this;
|
||||
}
|
||||
|
||||
@@ -67,7 +67,7 @@ export class Namespace extends EventEmitter {
|
||||
*/
|
||||
public use(
|
||||
fn: (socket: Socket, next: (err?: ExtendedError) => void) => void
|
||||
): Namespace {
|
||||
): this {
|
||||
this._fns.push(fn);
|
||||
return this;
|
||||
}
|
||||
@@ -106,7 +106,7 @@ export class Namespace extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public to(name: Room): Namespace {
|
||||
public to(name: Room): this {
|
||||
this._rooms.add(name);
|
||||
return this;
|
||||
}
|
||||
@@ -118,7 +118,7 @@ export class Namespace extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public in(name: Room): Namespace {
|
||||
public in(name: Room): this {
|
||||
this._rooms.add(name);
|
||||
return this;
|
||||
}
|
||||
@@ -222,7 +222,7 @@ export class Namespace extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public send(...args: readonly any[]): Namespace {
|
||||
public send(...args: readonly any[]): this {
|
||||
this.emit("message", ...args);
|
||||
return this;
|
||||
}
|
||||
@@ -233,7 +233,7 @@ export class Namespace extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public write(...args: readonly any[]): Namespace {
|
||||
public write(...args: readonly any[]): this {
|
||||
this.emit("message", ...args);
|
||||
return this;
|
||||
}
|
||||
@@ -262,7 +262,7 @@ export class Namespace extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public compress(compress: boolean): Namespace {
|
||||
public compress(compress: boolean): this {
|
||||
this._flags.compress = compress;
|
||||
return this;
|
||||
}
|
||||
@@ -275,7 +275,7 @@ export class Namespace extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public get volatile(): Namespace {
|
||||
public get volatile(): this {
|
||||
this._flags.volatile = true;
|
||||
return this;
|
||||
}
|
||||
@@ -286,7 +286,7 @@ export class Namespace extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public get local(): Namespace {
|
||||
public get local(): this {
|
||||
this._flags.local = true;
|
||||
return this;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { EventEmitter } from "events";
|
||||
import { PacketType } from "socket.io-parser";
|
||||
import { Packet, PacketType } from "socket.io-parser";
|
||||
import url = require("url");
|
||||
import debugModule from "debug";
|
||||
import type { Server } from "./index";
|
||||
import type { Client } from "./client";
|
||||
import type { Namespace } from "./namespace";
|
||||
import type { IncomingMessage } from "http";
|
||||
import type { IncomingMessage, IncomingHttpHeaders } from "http";
|
||||
import type {
|
||||
Adapter,
|
||||
BroadcastFlags,
|
||||
@@ -13,6 +13,7 @@ import type {
|
||||
SocketId,
|
||||
} from "socket.io-adapter";
|
||||
import base64id from "base64id";
|
||||
import type { ParsedUrlQuery } from "querystring";
|
||||
|
||||
const debug = debugModule("socket.io:socket");
|
||||
|
||||
@@ -33,7 +34,7 @@ export interface Handshake {
|
||||
/**
|
||||
* The headers sent as part of the handshake
|
||||
*/
|
||||
headers: object;
|
||||
headers: IncomingHttpHeaders;
|
||||
|
||||
/**
|
||||
* The date of creation (as string)
|
||||
@@ -68,12 +69,12 @@ export interface Handshake {
|
||||
/**
|
||||
* The query object
|
||||
*/
|
||||
query: object;
|
||||
query: ParsedUrlQuery;
|
||||
|
||||
/**
|
||||
* The auth object
|
||||
*/
|
||||
auth: object;
|
||||
auth: { [key: string]: any };
|
||||
}
|
||||
|
||||
export class Socket extends EventEmitter {
|
||||
@@ -190,7 +191,7 @@ export class Socket extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public to(name: Room): Socket {
|
||||
public to(name: Room): this {
|
||||
this._rooms.add(name);
|
||||
return this;
|
||||
}
|
||||
@@ -202,7 +203,7 @@ export class Socket extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public in(name: Room): Socket {
|
||||
public in(name: Room): this {
|
||||
this._rooms.add(name);
|
||||
return this;
|
||||
}
|
||||
@@ -213,7 +214,7 @@ export class Socket extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public send(...args: readonly any[]): Socket {
|
||||
public send(...args: readonly any[]): this {
|
||||
this.emit("message", ...args);
|
||||
return this;
|
||||
}
|
||||
@@ -224,7 +225,7 @@ export class Socket extends EventEmitter {
|
||||
* @return self
|
||||
* @public
|
||||
*/
|
||||
public write(...args: readonly any[]): Socket {
|
||||
public write(...args: readonly any[]): this {
|
||||
this.emit("message", ...args);
|
||||
return this;
|
||||
}
|
||||
@@ -236,10 +237,13 @@ export class Socket extends EventEmitter {
|
||||
* @param {Object} opts - options
|
||||
* @private
|
||||
*/
|
||||
private packet(packet, opts: any = {}) {
|
||||
private packet(
|
||||
packet: Omit<Packet, "nsp"> & Partial<Pick<Packet, "nsp">>,
|
||||
opts: any = {}
|
||||
): void {
|
||||
packet.nsp = this.nsp.name;
|
||||
opts.compress = false !== opts.compress;
|
||||
this.client._packet(packet, opts);
|
||||
this.client._packet(packet as Packet, opts);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -304,7 +308,7 @@ export class Socket extends EventEmitter {
|
||||
* @param {Object} packet
|
||||
* @private
|
||||
*/
|
||||
_onpacket(packet) {
|
||||
_onpacket(packet: Packet): void {
|
||||
debug("got packet %j", packet);
|
||||
switch (packet.type) {
|
||||
case PacketType.EVENT:
|
||||
@@ -335,10 +339,10 @@ export class Socket extends EventEmitter {
|
||||
/**
|
||||
* Called upon event packet.
|
||||
*
|
||||
* @param {Object} packet - packet object
|
||||
* @param {Packet} packet - packet object
|
||||
* @private
|
||||
*/
|
||||
private onevent(packet): void {
|
||||
private onevent(packet: Packet): void {
|
||||
const args = packet.data || [];
|
||||
debug("emitting event %j", args);
|
||||
|
||||
@@ -362,7 +366,7 @@ export class Socket extends EventEmitter {
|
||||
* @param {Number} id - packet id
|
||||
* @private
|
||||
*/
|
||||
private ack(id: number) {
|
||||
private ack(id: number): () => void {
|
||||
const self = this;
|
||||
let sent = false;
|
||||
return function () {
|
||||
@@ -386,12 +390,12 @@ export class Socket extends EventEmitter {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private onack(packet): void {
|
||||
const ack = this.acks.get(packet.id);
|
||||
private onack(packet: Packet): void {
|
||||
const ack = this.acks.get(packet.id!);
|
||||
if ("function" == typeof ack) {
|
||||
debug("calling ack %s with %j", packet.id, packet.data);
|
||||
ack.apply(this, packet.data);
|
||||
this.acks.delete(packet.id);
|
||||
this.acks.delete(packet.id!);
|
||||
} else {
|
||||
debug("bad ack %s", packet.id);
|
||||
}
|
||||
@@ -429,7 +433,7 @@ export class Socket extends EventEmitter {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_onclose(reason: string): Socket | undefined {
|
||||
_onclose(reason: string): this | undefined {
|
||||
if (!this.connected) return this;
|
||||
debug("closing socket - reason %s", reason);
|
||||
super.emit("disconnecting", reason);
|
||||
@@ -449,7 +453,7 @@ export class Socket extends EventEmitter {
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_error(err) {
|
||||
_error(err): void {
|
||||
this.packet({ type: PacketType.CONNECT_ERROR, data: err });
|
||||
}
|
||||
|
||||
@@ -461,7 +465,7 @@ export class Socket extends EventEmitter {
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
public disconnect(close = false): Socket {
|
||||
public disconnect(close = false): this {
|
||||
if (!this.connected) return this;
|
||||
if (close) {
|
||||
this.client._disconnect();
|
||||
@@ -479,7 +483,7 @@ export class Socket extends EventEmitter {
|
||||
* @return {Socket} self
|
||||
* @public
|
||||
*/
|
||||
public compress(compress: boolean): Socket {
|
||||
public compress(compress: boolean): this {
|
||||
this.flags.compress = compress;
|
||||
return this;
|
||||
}
|
||||
@@ -492,7 +496,7 @@ export class Socket extends EventEmitter {
|
||||
* @return {Socket} self
|
||||
* @public
|
||||
*/
|
||||
public get volatile(): Socket {
|
||||
public get volatile(): this {
|
||||
this.flags.volatile = true;
|
||||
return this;
|
||||
}
|
||||
@@ -504,7 +508,7 @@ export class Socket extends EventEmitter {
|
||||
* @return {Socket} self
|
||||
* @public
|
||||
*/
|
||||
public get broadcast(): Socket {
|
||||
public get broadcast(): this {
|
||||
this.flags.broadcast = true;
|
||||
return this;
|
||||
}
|
||||
@@ -515,7 +519,7 @@ export class Socket extends EventEmitter {
|
||||
* @return {Socket} self
|
||||
* @public
|
||||
*/
|
||||
public get local(): Socket {
|
||||
public get local(): this {
|
||||
this.flags.local = true;
|
||||
return this;
|
||||
}
|
||||
@@ -526,14 +530,18 @@ export class Socket extends EventEmitter {
|
||||
* @param {Array} event - event that will get emitted
|
||||
* @private
|
||||
*/
|
||||
private dispatch(event): void {
|
||||
private dispatch(event: [eventName: string, ...args: any[]]): void {
|
||||
debug("dispatching an event %j", event);
|
||||
this.run(event, (err) => {
|
||||
process.nextTick(() => {
|
||||
if (err) {
|
||||
return this._onerror(err);
|
||||
}
|
||||
super.emit.apply(this, event);
|
||||
if (this.connected) {
|
||||
super.emit.apply(this, event);
|
||||
} else {
|
||||
debug("ignore packet received after disconnection");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -547,7 +555,7 @@ export class Socket extends EventEmitter {
|
||||
*/
|
||||
public use(
|
||||
fn: (event: Array<any>, next: (err: Error) => void) => void
|
||||
): Socket {
|
||||
): this {
|
||||
this.fns.push(fn);
|
||||
return this;
|
||||
}
|
||||
@@ -559,11 +567,14 @@ export class Socket extends EventEmitter {
|
||||
* @param {Function} fn - last fn call in the middleware
|
||||
* @private
|
||||
*/
|
||||
private run(event: Array<any>, fn: (err: Error | null) => void) {
|
||||
private run(
|
||||
event: [eventName: string, ...args: any[]],
|
||||
fn: (err: Error | null) => void
|
||||
): void {
|
||||
const fns = this.fns.slice(0);
|
||||
if (!fns.length) return fn(null);
|
||||
|
||||
function run(i) {
|
||||
function run(i: number) {
|
||||
fns[i](event, function (err) {
|
||||
// upon error, short-circuit
|
||||
if (err) return fn(err);
|
||||
@@ -611,7 +622,7 @@ export class Socket extends EventEmitter {
|
||||
* @param listener
|
||||
* @public
|
||||
*/
|
||||
public onAny(listener: (...args: any[]) => void): Socket {
|
||||
public onAny(listener: (...args: any[]) => void): this {
|
||||
this._anyListeners = this._anyListeners || [];
|
||||
this._anyListeners.push(listener);
|
||||
return this;
|
||||
@@ -624,7 +635,7 @@ export class Socket extends EventEmitter {
|
||||
* @param listener
|
||||
* @public
|
||||
*/
|
||||
public prependAny(listener: (...args: any[]) => void): Socket {
|
||||
public prependAny(listener: (...args: any[]) => void): this {
|
||||
this._anyListeners = this._anyListeners || [];
|
||||
this._anyListeners.unshift(listener);
|
||||
return this;
|
||||
@@ -636,7 +647,7 @@ export class Socket extends EventEmitter {
|
||||
* @param listener
|
||||
* @public
|
||||
*/
|
||||
public offAny(listener?: (...args: any[]) => void): Socket {
|
||||
public offAny(listener?: (...args: any[]) => void): this {
|
||||
if (!this._anyListeners) {
|
||||
return this;
|
||||
}
|
||||
|
||||
14
package-lock.json
generated
14
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "socket.io",
|
||||
"version": "3.1.0",
|
||||
"version": "3.1.2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -874,9 +874,9 @@
|
||||
}
|
||||
},
|
||||
"engine.io-client": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-4.1.0.tgz",
|
||||
"integrity": "sha512-OUmn4m71/lW3ixICv4h3DuBRuh3ri0w3cDuepjsrINSbbqbni4Xw1shTFiKhl0v58lEtNpwJTpSKJJ3fondu5Q==",
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-4.1.2.tgz",
|
||||
"integrity": "sha512-1mwvwKYMa0AaCy+sPgvJ/SnKyO5MJZ1HEeXfA3Rm/KHkHGiYD5bQVq8QzvIrkI01FuVtOdZC5lWdRw1BGXB2NQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"base64-arraybuffer": "0.1.4",
|
||||
@@ -2258,9 +2258,9 @@
|
||||
"integrity": "sha512-+vDov/aTsLjViYTwS9fPy5pEtTkrbEKsw2M+oVSoFGw6OD1IpvlV1VPhUzNbofCQ8oyMbdYJqDtGdmHQK6TdPg=="
|
||||
},
|
||||
"socket.io-client": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-3.1.0.tgz",
|
||||
"integrity": "sha512-T4qPOL80KnoBwkdR70zMpiR6aH6zv3ZqLNriofHqsO9wvQllNTOez0mpV4GdVqo1Y55Z+h8YOlBo7c8pOxDlHw==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-3.1.2.tgz",
|
||||
"integrity": "sha512-fXhF8plHrd7U14A7K0JPOmZzpmGkLpIS6623DzrBZqYzI/yvlP4fA3LnxwthEVgiHmn2uJ4KjdnQD8A03PuBWQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/component-emitter": "^1.2.10",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "socket.io",
|
||||
"version": "3.1.0",
|
||||
"version": "3.1.2",
|
||||
"description": "node.js realtime framework server",
|
||||
"keywords": [
|
||||
"realtime",
|
||||
@@ -45,7 +45,7 @@
|
||||
"dependencies": {
|
||||
"@types/cookie": "^0.4.0",
|
||||
"@types/cors": "^2.8.8",
|
||||
"@types/node": "^14.14.10",
|
||||
"@types/node": ">=10.0.0",
|
||||
"accepts": "~1.3.4",
|
||||
"base64id": "~2.0.0",
|
||||
"debug": "~4.3.1",
|
||||
@@ -63,7 +63,7 @@
|
||||
"nyc": "^15.1.0",
|
||||
"prettier": "^2.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"socket.io-client": "3.1.0",
|
||||
"socket.io-client": "3.1.2",
|
||||
"socket.io-client-v2": "npm:socket.io-client@^2.4.0",
|
||||
"superagent": "^6.1.0",
|
||||
"supertest": "^6.0.1",
|
||||
|
||||
@@ -1787,6 +1787,33 @@ describe("socket.io", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("should ignore a packet received after disconnection", (done) => {
|
||||
const srv = createServer();
|
||||
const sio = new Server(srv);
|
||||
|
||||
srv.listen(() => {
|
||||
const clientSocket = client(srv);
|
||||
|
||||
const success = () => {
|
||||
clientSocket.close();
|
||||
sio.close();
|
||||
done();
|
||||
};
|
||||
|
||||
sio.on("connection", (socket) => {
|
||||
socket.on("test", () => {
|
||||
done(new Error("should not happen"));
|
||||
});
|
||||
socket.on("disconnect", success);
|
||||
});
|
||||
|
||||
clientSocket.on("connect", () => {
|
||||
clientSocket.emit("test", Buffer.alloc(10));
|
||||
clientSocket.disconnect();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("onAny", () => {
|
||||
it("should call listener", (done) => {
|
||||
const srv = createServer();
|
||||
@@ -2479,6 +2506,32 @@ describe("socket.io", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("should be able to connect to a namespace with a query", (done) => {
|
||||
const srv = createServer();
|
||||
const sio = new Server(srv, {
|
||||
allowEIO3: true,
|
||||
});
|
||||
|
||||
srv.listen(async () => {
|
||||
const port = (srv.address() as AddressInfo).port;
|
||||
const clientSocket = io_v2.connect(
|
||||
`http://localhost:${port}/the-namespace`,
|
||||
{
|
||||
multiplex: false,
|
||||
}
|
||||
);
|
||||
clientSocket.query = { test: "123" };
|
||||
|
||||
const [socket]: Array<any> = await Promise.all([
|
||||
waitFor(sio.of("/the-namespace"), "connection"),
|
||||
waitFor(clientSocket, "connect"),
|
||||
]);
|
||||
|
||||
expect(socket.handshake.auth).to.eql({ test: "123" });
|
||||
success(sio, clientSocket, done);
|
||||
});
|
||||
});
|
||||
|
||||
it("should not connect if `allowEIO3` is false (default)", (done) => {
|
||||
const srv = createServer();
|
||||
const sio = new Server(srv);
|
||||
|
||||
Reference in New Issue
Block a user