ws-user
Version:
User authentication and authorization for WebSocket applications.
256 lines (236 loc) • 10.5 kB
HTML
<html>
<head>
<title>WS-User</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" />
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" />
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<style>
#list-headers ul {
list-style: none;
padding-left: .5em;
}
#list-headers > ul {
padding: 0;
}
#list-headers h1, h2, h3, h4, h5 {
white-space: nowrap;
}
.markdown-body {
padding-left: 2em;
}
@media (min-width: 992px) {
.vh-lg-100{
height: 100vh ;
}
}
</style>
</head>
<body>
<div class="row w-100">
<div class="col-12 text-center">
<h1 id="ws-user">WS-User</h1>
<p>User authentication and authorization for WebSocket applications.<br>
This manual is also available in <a href="https://manuel-lohmus.github.io/ws-user/README.html">HTML5</a>.</p>
</div>
</div>
<div class="row w-100">
<div class="col-lg-3 d-lg-inline">
<div class="sticky-top overflow-auto vh-lg-100">
<div id="list-headers" class="list-group mt-2 ms-lg-2 ms-4">
<h4 id="table-of-contents">Table of contents</h4>
<ul>
<li><a href="#overview"><strong>Overview</strong></a></li>
<li><a href="#features"><strong>Features</strong></a></li>
<li><a href="#installation"><strong>Installation</strong></a></li>
<li><a href="#configuration"><strong>Configuration</strong></a></li>
<li><a href="#usage"><strong>Usage</strong></a></li>
<li><a href="#license"><strong>License</strong></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9 mt-2">
<div class="ps-4 markdown-body" data-bs-spy="scroll" data-bs-target="#list-headers" data-bs-offset="0" tabindex="0">
<h2 id="overview">Overview</h2>
<p>WS-User module is a library that manages user data over the websocket protocol.
Used when building a <strong>single-page application</strong> (<strong>SPA</strong>), this library offers a modern approach.<br>
Now using the specially designed module <a href="https://www.npmjs.com/package/ws13"><code>ws13</code></a> to get a better and more stable connection.<br />
It frontends and backends for user data management libraries.<br />
<code>browser.js</code> is a frontend library that provides a user interface for managing user data.<br />
<code>index.js</code> is a backend library that provides managing user data over the websocket protocol in real-time.
This module is part of the <a href="https://www.npmjs.com/package/conextra">'conextra'</a> framework,
which is a simple and easy-to-use single-page application (SPA) framework.
You have to try it! A different solution than MVC (model–view–controller).</p>
<h2 id="features">Features</h2>
<ul>
<li>Create new user</li>
<li>Login and logout user</li>
<li>Retrieve user details</li>
<li>Update existing user information</li>
<li>Open data link over websocket. Used module <a href="https://www.npmjs.com/package/ws13"><code>ws13</code></a>.</li>
<li>and more...</li>
</ul>
<h2 id="installation">Installation</h2>
<p>You can install <code>ws-user</code> using this command:<br />
<code>npm install ws-user</code></p>
<h2 id="configuration">Configuration</h2>
<p>You can configure the <code>ws-user</code> module using the <code>config-sets.json</code> file:</p>
<pre><code class="language-json">{
"isProduction": true,
"production": {
"ws-user": {
"pathToFrontendErrors": "log/frontend_errors.log",
"pathToLoggedUsers": "logged_users.json",
"pathToUsersDir": "users"
},
"nodemailer": {
"host": "smtp-mail.outlook.com",
"port": 587,
"secureConnection": false,
"tls": {
"ciphers": "SSLv3"
},
"auth": {
"user": "*user*@outlook.com",
"pass": ""
}
}
},
"development": {}
}
</code></pre>
<h2 id="usage">Usage</h2>
<p>On the server side, you can use the following code to start the server:</p>
<pre><code class="language-javascript">const CreateWsUser = require('ws-user');
const wsUser = CreateWsUser(options);
if (wsUser) {
wsUser.onerror = (error) => {
console.error(error);
};
wsUser.onopen = () => {
console.log('Server started');
};
wsUser.onclose = () => {
console.log('Server closed');
};
wsUser.onmessage = (event) => {
// Received message from client and websocket is paused, disable to receive messages
console.log(event.data);
wsUser.messageHandled(); // continue, websocket is open, enable to receive messages
};
wsUser.extensionCommands = {
'myCommand': (event) => {
console.log(event);
const myData = event.message; // Received `myData` from client
// Do something
// Send response to client
wsUser.send(`$myCommand:${myData}`);
event.done(); // or wsUser.messageHandled(); `myCommand` is handled > continue, websocket is open
}
};
}
</code></pre>
<p>On the client side, you can use the following code to connect to the server:</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<title>WS-User</title>
<!-- STEP 1: Import the library. -->
<!-- Import the library. Routes in the node_modules folder on the server `tiny-https-server` -->
<script async src="node_modules/data-context@2"></script>
<script async src="node_modules/data-context-binding@2"></script>
<script async src="node_modules/ws-user"></script>
<!-- or use CDN -->
<script src="https://cdn.jsdelivr.net/npm/data-context"></script>
<script src="https://cdn.jsdelivr.net/npm/data-context-binding"></script>
<script src="https://cdn.jsdelivr.net/npm/ws-user"></script>
</head>
<body>
<script>
// STEP 3: Use the library.
importModules(['data-context', 'data-context-binding', 'ws-user'], function (dataContext, dataContextBinding, WsUser) {
const wsUser = WsUser({ debugMode });
wsUser.onerror = (error) => {
console.error(error);
};
wsUser.onopen = () => {
console.log('Connected to the server');
};
wsUser.onclose = () => {
console.log('Disconnected from the server');
};
wsUser.onmessage = (event) => {
console.log(event.data);
wsUser.messageHandled();
};
wsUser.extensionCommands = {
'myCommand': (event) => {
console.log(event);
const myData = event.message;
wsUser.send(`$myCommand:${myData}`);
event.done();
}
};
wsUser.onuserinfo = function (event) {
console.log(event);
if (event?.userinfo?.message) { alert(event.userinfo.message); }
};
//wsUser.login(email, password);
//wsUser.logout();
//wsUser.create_account(email, password, name);
//wsUser.update_name(name);
//wsUser.update_password(password);
//wsUser.security_code(email, code, resetPassword);
});
// STEP 2: Add the importModules function.
function importModules(importIdentifierArray, cb) {
var thisScope = "undefined" != typeof globalThis
? globalThis
: "undefined" != typeof window
? window
: "undefined" != typeof global
? global : "undefined" != typeof self
? self
: {};
if (!thisScope.modules) { thisScope.modules = {}; }
waitModules();
function waitModules() {
if (importIdentifierArray.length) {
for (let i = 0; i < importIdentifierArray.length; i++) {
if (!thisScope.modules[importIdentifierArray[i]]) { return setTimeout(waitModules, 10); }
}
}
cb.call(thisScope, ...importIdentifierArray.map(function (id) { return thisScope.modules[id]; }));
}
}
</script>
</body>
</html>
</code></pre>
<h2 id="license">License</h2>
<p>This project is licensed under the MIT License.</p>
<p>Copyright © 2021 Manuel Lõhmus</p>
<p><a href="https://www.paypal.com/donate?hosted_button_id=GJHV8E2DBBFJU"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt="Donate" /></a></p>
<p>Donations are welcome and will go towards further development of this project.</p>
<br>
<br>
<br>
</div>
</div>
</div>
<script>
(function () {
'use strict';
var isIE = !!document.documentMode; // Detect IE
if (!isIE) {
// list-group style for headers
document.querySelectorAll('#list-headers a')
.forEach(function (a) { a.classList.add('list-group-item', 'list-group-item-action') });
}
})();
</script>
</body>
</html>