mirror of
https://github.com/esiur/esiur-js.git
synced 2025-06-27 07:13:12 +00:00
1.6.0
This commit is contained in:
96
demo/chat/chat.js
Normal file
96
demo/chat/chat.js
Normal file
@ -0,0 +1,96 @@
|
||||
import DistributedConnection from "../../src/Net/IIP/DistributedConnection.js";
|
||||
import Warehouse from "../../src/Resource/Warehouse.js";
|
||||
|
||||
import { createRequire } from 'module'
|
||||
import AsyncReply from "../../src/Core/AsyncReply.js";
|
||||
import DistributedServer from "../../src/Net/IIP/DistributedServer.js";
|
||||
import IMembership from "../../src/Security/Membership/IMembership.js";
|
||||
import WSSocket from "../../src/Net/Sockets/WSSocket.js";
|
||||
import MemoryStore from "../../src/Stores/MemoryStore.js";
|
||||
import DC from "../../src/Data/DataConverter.js";
|
||||
import IResource from "../../src/Resource/IResource.js";
|
||||
import Structure from "../../src/Data/Structure.js";
|
||||
|
||||
const require = createRequire(import.meta.url);
|
||||
|
||||
const WebSocket = require('ws');
|
||||
const http = require("http");
|
||||
const fs = require("fs");
|
||||
|
||||
const wss = new WebSocket.Server({port: 8081});
|
||||
|
||||
class MyMembership extends IMembership {
|
||||
userExists(username, domain) {
|
||||
return new AsyncReply(true);
|
||||
}
|
||||
getPassword(username, domain) {
|
||||
return new AsyncReply(DC.stringToBytes("1234"));
|
||||
}
|
||||
};
|
||||
|
||||
var server;
|
||||
|
||||
class MyChat extends IResource {
|
||||
|
||||
static get template() {
|
||||
return {
|
||||
namespace: "Chat",
|
||||
properties: [{name: "title"}, { name: "messages" }, {name: "users"}],
|
||||
events: [{ name: "message" }, { name: "voice", listenable: true }, {name: "login"}, {name: "logout"}],
|
||||
functions: [{ name: "send" }]
|
||||
};
|
||||
}
|
||||
|
||||
constructor(){
|
||||
super();
|
||||
this.messages = [new Structure({usr: "Admin", msg: "Welcome to Esiur", date: new Date()})];
|
||||
this.title = "Chat Room";
|
||||
}
|
||||
|
||||
get users() {
|
||||
return server.connections.map(x=>x.session.remoteAuthentication.username);
|
||||
}
|
||||
|
||||
send(msg, sender)
|
||||
{
|
||||
let s = new Structure({ msg, usr: sender.session.remoteAuthentication.username, date: new Date()});
|
||||
this.messages.push(s);
|
||||
this._emit("message", s);
|
||||
}
|
||||
|
||||
query(path, sender) {
|
||||
return new AsyncReply([this]);
|
||||
}
|
||||
}
|
||||
|
||||
let sys = await Warehouse.new(MemoryStore, "sys");
|
||||
let ms = await Warehouse.new(MyMembership, "ms");
|
||||
let chat = await Warehouse.new(MyChat, "chat", sys);
|
||||
server = await Warehouse.new(DistributedServer, "dss", sys, null, null, {membership: ms, entryPoint: chat});
|
||||
|
||||
wss.on('connection', function connection(ws)
|
||||
{
|
||||
let con = server.add();
|
||||
con.assign(new WSSocket(ws));
|
||||
con.on("ready", (x)=>{
|
||||
chat._emit("login", x.session.remoteAuthentication.username);
|
||||
}).on("close", (x)=>{
|
||||
chat._emit("logout", x.session.remoteAuthentication.username);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
http.createServer(function (req, res) {
|
||||
fs.readFile("." + req.url, function (err,data) {
|
||||
if (err) {
|
||||
res.writeHead(404);
|
||||
res.end(JSON.stringify(err));
|
||||
} else {
|
||||
res.writeHead(200, {"Content-Type": req.url.split('.').pop() == "js" ? "text/javascript" : "text/html"});
|
||||
res.end(data);
|
||||
}
|
||||
});
|
||||
}).listen(8080);
|
||||
|
||||
console.log(`HTTP Server running http://localhost:8080/demo/chat/index.html`);
|
||||
console.log(`IIP Server running iip://localhost:8081`);
|
||||
91
demo/chat/index.html
Normal file
91
demo/chat/index.html
Normal file
@ -0,0 +1,91 @@
|
||||
<html>
|
||||
<head>
|
||||
<script type="module" src="../../src/esiur.js"></script>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script>
|
||||
var service;
|
||||
let $ = document.querySelector;
|
||||
|
||||
async function connect(){
|
||||
|
||||
let status = document.getElementById("status");
|
||||
let username = document.getElementById("username").value;
|
||||
let login = document.getElementById("login");
|
||||
let chat = document.getElementById("chat");
|
||||
|
||||
try {
|
||||
status.innerHTML = "Connecting...";
|
||||
service = await wh.get("iip://localhost:8081/chat", {username, password: "1234"});
|
||||
login.style.display = "none";
|
||||
service.on("message", appendMessage)
|
||||
.on(":title", updateTitle)
|
||||
.on("login", appendUser)
|
||||
.on("logout", removeUser)
|
||||
updateTitle();
|
||||
service.messages.forEach(appendMessage);
|
||||
service.users.forEach((x)=>appendUser(x, true));
|
||||
status.innerHTML = "Online";
|
||||
} catch (ex) {
|
||||
status.innerHTML = "Error " + ex.toString;
|
||||
}
|
||||
}
|
||||
|
||||
function appendMessage(message)
|
||||
{
|
||||
let el = document.createElement("div");
|
||||
let list = document.getElementById("list");
|
||||
el.innerHTML = `<span>${message.usr}</span><span>${message.msg}</span><span>${message.date.toLocaleTimeString()}</span>`;
|
||||
list.append(el);
|
||||
list.scrollTop = list.scrollHeight;
|
||||
}
|
||||
|
||||
function appendUser(usr, silent){
|
||||
let el = document.createElement("div");
|
||||
let users = document.getElementById("users");
|
||||
el.innerHTML = usr;
|
||||
users.append(el);
|
||||
|
||||
if (!silent)
|
||||
appendMessage({usr, msg: "joined the room", date: new Date()});
|
||||
}
|
||||
|
||||
function removeUser(usr){
|
||||
for(var i = 0; i < users.children.length; i++)
|
||||
if (users.children[i].innerHTML == usr)
|
||||
{
|
||||
users.removeChild(users.children[i]);
|
||||
break;
|
||||
}
|
||||
|
||||
appendMessage({usr, msg: "left the room", date: new Date()});
|
||||
}
|
||||
|
||||
function updateTitle()
|
||||
{
|
||||
document.getElementById("title").value = service.title;
|
||||
}
|
||||
|
||||
function send(){
|
||||
service.send(document.getElementById("message").value);
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="login">
|
||||
Username: <input id="username"> <button onclick="connect()">Connect</button>
|
||||
</div>
|
||||
<div id="chat">
|
||||
<div class="bar">
|
||||
<input id="title" onkeyup="service.title = this.value"><div id="status"></div>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div>Online users: </div> <div id="users"></div>
|
||||
</div>
|
||||
<div id="list"></div>
|
||||
<div class="bar">
|
||||
<input id="message"><button onclick="send()">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
62
demo/chat/style.css
Normal file
62
demo/chat/style.css
Normal file
@ -0,0 +1,62 @@
|
||||
body
|
||||
{
|
||||
margin: 10vw 10vh;
|
||||
}
|
||||
|
||||
#list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
height: 50vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#list > div {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
#list > div > span:nth-child(1)
|
||||
{
|
||||
color: #7159f5;
|
||||
}
|
||||
|
||||
#list > div > span:nth-child(2)
|
||||
{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
#chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 4px solid #d6d6d6;
|
||||
border-radius: 23px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#status{
|
||||
flex: 1;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
#login {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.bar{
|
||||
display: flex; gap: 10px; background: gainsboro; padding: 10px;
|
||||
}
|
||||
|
||||
#users{
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
color: #d04949;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#users > div {
|
||||
border: 1px solid #b3b3b3;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
padding: 0 6px;
|
||||
}
|
||||
Reference in New Issue
Block a user