Compare commits
No commits in common. "master" and "v1.0" have entirely different histories.
6
.gitignore
vendored
6
.gitignore
vendored
@ -1,7 +1,3 @@
|
||||
node_modules/
|
||||
config.json
|
||||
dist/
|
||||
.parcel-cache/
|
||||
.cache/
|
||||
package-lock.json
|
||||
.vscode/
|
||||
|
||||
|
||||
1601
package-lock.json
generated
Normal file
1601
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
35
package.json
@ -1,18 +1,21 @@
|
||||
{
|
||||
"name": "wschat-ng",
|
||||
"version": "1.0.3",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "npx ts-node src/index.ts"
|
||||
},
|
||||
"author": "szdytom <szdytom@qq.com>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/express": "^5.0.3",
|
||||
"@types/socket.io": "^3.0.1",
|
||||
"express": "^5.1.0",
|
||||
"socket.io": "^4.8.1",
|
||||
"ts-node": "^10.9.2"
|
||||
}
|
||||
"name": "wschat-ng",
|
||||
"version": "1.0.3",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "ts-node src/index.ts"
|
||||
},
|
||||
"author": "szdytom <szdytom@163.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/express": "^4.17.11",
|
||||
"@types/socket.io": "^2.1.13",
|
||||
"ts-node": "^9.1.1",
|
||||
"typescript": "^4.2.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.17.1",
|
||||
"socket.io": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
@ -3,9 +3,7 @@
|
||||
|
||||
<head>
|
||||
<title>WebSocket Chat Room</title>
|
||||
<link rel="icon" href="favicon.png">
|
||||
<link rel="stylesheet" href="style.css"/>
|
||||
<script type="module" src="script.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -13,14 +11,13 @@
|
||||
|
||||
<textarea id="send" placeholder="Say something or run a command..." spellcheck="false"></textarea>
|
||||
<div class="top-box">
|
||||
<button class="send-button" id="clear-button">Clear</button>
|
||||
<button class="send-button" onclick="clear_message()">Clear</button>
|
||||
<p class="note"><input id="scroll-option" type="checkbox" checked /> Enable auto scroll</p>
|
||||
<p class="note">Version: SOCKET.IO-2.2</p>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<span class="note">Press Ctrl + Enter to send </span>
|
||||
<button class="send-button" id="uploader">Upload</button>
|
||||
<button class="send-button" id="send-button">Send</button>
|
||||
<button class="send-button" onclick="send()">Send</button>
|
||||
</div>
|
||||
|
||||
<div id="prompt-background" hidden></div>
|
||||
@ -32,7 +29,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="file" id="real-uploader" hidden/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/es5-shim@4.5.15/es5-shim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.0.0/dist/socket.io.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.2.7/dist/purify.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
||||
<script src="./script.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/remarkable.js"></script>
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/styles/tomorrow.min.css">
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/highlight.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "public",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"scripts": {
|
||||
"build": "npx parcel src/index.html"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"buffer": "^6.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"dompurify": "^3.2.6",
|
||||
"highlightjs": "^9.16.2",
|
||||
"jquery": "^3.6.1",
|
||||
"katex": "^0.16.2",
|
||||
"parcel": "^2.15.4",
|
||||
"remarkable": "^2.0.1",
|
||||
"remarkable-katex": "^1.2.1",
|
||||
"socket.io-client": "^4.5.2"
|
||||
}
|
||||
}
|
||||
105
public/script.js
105
public/script.js
@ -1,23 +1,12 @@
|
||||
import io from 'socket.io-client';
|
||||
import $ from 'jquery';
|
||||
import {Remarkable} from 'remarkable';
|
||||
import DOMPurify from 'dompurify';
|
||||
import rkatex from 'remarkable-katex';
|
||||
import hljs from 'highlightjs';
|
||||
|
||||
import 'highlightjs/styles/tomorrow.css';
|
||||
import 'katex/dist/katex.min.css'
|
||||
|
||||
let username;
|
||||
let is_reconnection = false;
|
||||
let last_command = null;
|
||||
const server = `ws://${location.host}`;
|
||||
|
||||
let ws;
|
||||
let md;
|
||||
let unread_message = 0;
|
||||
|
||||
let assets = [];
|
||||
|
||||
$(() => {
|
||||
init().then(x => ws = x).catch(err => console.log(err))
|
||||
});
|
||||
@ -34,11 +23,6 @@ function format_time(time) {
|
||||
return `${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
|
||||
}
|
||||
|
||||
function render_download(data) {
|
||||
const reg = /\{\%download\s+([^\s]+)\s+([^\}]+)\}/g;
|
||||
return data.replaceAll(reg, '<a href="$2" download="$1">Download $1</a>');
|
||||
}
|
||||
|
||||
function write_message(data) {
|
||||
const message = data.msg;
|
||||
|
||||
@ -60,8 +44,6 @@ function write_message(data) {
|
||||
}
|
||||
rendered_message = DOMPurify.sanitize(rendered_message);
|
||||
|
||||
rendered_message = render_download(rendered_message);
|
||||
|
||||
$('#message').append(`
|
||||
<div class="msg">
|
||||
<span class="msg-from ${message_class} ${(data.is_private ? 'msg-private' : '')}">
|
||||
@ -94,18 +76,18 @@ async function init() {
|
||||
});
|
||||
|
||||
clear_message();
|
||||
|
||||
|
||||
write_message({
|
||||
type: 'system-message',
|
||||
msg: 'Notification permission is used to get you informated. Please allow it.',
|
||||
msg: 'Notification permission are use to get you informated. Please allow it.',
|
||||
is_private: true,
|
||||
plain: true,
|
||||
});
|
||||
await Notification.requestPermission();
|
||||
|
||||
|
||||
await login_name();
|
||||
|
||||
md = new Remarkable({
|
||||
md = new remarkable.Remarkable({
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
@ -120,15 +102,10 @@ async function init() {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
md.use(rkatex);
|
||||
md.inline.ruler.enable(['mark', 'sup', 'sub']);
|
||||
|
||||
md.inline.validateLink = function() {
|
||||
return true;
|
||||
};
|
||||
|
||||
const ws = new io();
|
||||
md.inline.ruler.enable(['mark', 'sup', 'sub']);
|
||||
|
||||
const ws = new io(server);
|
||||
|
||||
ws.on('connect', () => {
|
||||
if (is_reconnection) {
|
||||
@ -185,7 +162,7 @@ async function init() {
|
||||
ws.on('command-block-reply', data => {
|
||||
write_message({
|
||||
type: 'command-block',
|
||||
msg: `>> ${last_command}<br/><- ${data}`,
|
||||
msg: `>> ${last_command}\n<- ${data}`,
|
||||
is_private: true,
|
||||
plain: true,
|
||||
});
|
||||
@ -200,23 +177,6 @@ async function init() {
|
||||
});
|
||||
});
|
||||
|
||||
$('#clear-button').click(function() {
|
||||
clear_message();
|
||||
});
|
||||
|
||||
$('#send-button').click(async function() {
|
||||
await send();
|
||||
})
|
||||
|
||||
$('#uploader').click(function() {
|
||||
$('#real-uploader').click();
|
||||
});
|
||||
|
||||
$('#real-uploader').change(async function() {
|
||||
const content = await upload(this.files[0]);
|
||||
$('#send').val($('#send').val() + content);
|
||||
});
|
||||
|
||||
$('#send').focus();
|
||||
|
||||
return ws;
|
||||
@ -244,44 +204,8 @@ function open_prompt(title) {
|
||||
return res;
|
||||
}
|
||||
|
||||
function get_url_query(query_name) {
|
||||
var reg = new RegExp("(^|&)" + query_name + "=([^&]*)(&|$)", "i");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
var context = "";
|
||||
if (r != null) {
|
||||
context = r[2];
|
||||
}
|
||||
reg = null;
|
||||
r = null;
|
||||
return context == null || context == "" || context == "undefined" ? "" : context;
|
||||
}
|
||||
|
||||
async function login_name() {
|
||||
username = get_url_query("name");
|
||||
|
||||
if (username === undefined || username.length == 0) {
|
||||
username = await open_prompt('[Login] Input your name');
|
||||
}
|
||||
}
|
||||
|
||||
function encode_file(file) {
|
||||
return new Promise((resolve,) => {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = (e) => {
|
||||
resolve(e.target.result);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function upload(file) {
|
||||
const dataurl = await encode_file(file);
|
||||
const id = assets.length;
|
||||
assets.push(dataurl);
|
||||
if (file.type.startsWith('image/')) {
|
||||
return ``;
|
||||
}
|
||||
return `{%download ${file.name} %asset${id}}`;
|
||||
username = await open_prompt('[Login] Input your name');
|
||||
}
|
||||
|
||||
async function send() {
|
||||
@ -301,11 +225,6 @@ async function send() {
|
||||
last_command = data;
|
||||
}
|
||||
|
||||
for (let i in assets) {
|
||||
data = data.replaceAll(`%asset${i}`, assets[i]);
|
||||
}
|
||||
assets = [];
|
||||
|
||||
if (data.startsWith('/su')) {
|
||||
// a administrator login command.
|
||||
// now ask for passcode
|
||||
@ -340,7 +259,7 @@ document.addEventListener('keydown', async function (key_event) {
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("visibilitychange", function () {
|
||||
document.addEventListener("visibilitychange", function() {
|
||||
if (document.visibilityState === 'visible') { unread_message = 0; }
|
||||
$('title').text(`WebSocket Chat Room`);
|
||||
});
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
@import './proton-color.css';
|
||||
@import 'proton-color.css';
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
|
||||
@ -44,7 +44,7 @@ io.on('connection', socket => {
|
||||
});
|
||||
});
|
||||
|
||||
app.use('/', Express.static(path.join(__dirname, '../public/dist')));
|
||||
app.use('/', Express.static(path.join(__dirname, '../public')));
|
||||
|
||||
const server_port = parseInt(process.env.PORT) | 4412;
|
||||
http.listen(server_port, () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user