JSFiddle - React, Tailwind, and code Playground
HTML
<form name="push">
<input type="hidden" name="userId">
<input type="text" name="message">
<input type="submit" value="Send">
</form>
<div id="subscribe"></div>
JavaScript
const http = require('http');
const fs = require('fs');
const path = require('path');
const WebSocketServer = new require('ws');
const wss = new WebSocketServer.Server({port: 8888});
let clients = [];
wss.on('connection', ws => {
ws.on('message', message => {
for (var key in clients) {
clients[key].send(JSON.stringify({
type: 'message',
message,
author: id
}));
}
});
let id = clients.length;
clients[id] = ws;
console.log(`new connection: ${id}`);
clients[id].send(JSON.stringify({
type: 'hello',
message: `hi, your identifier: ${id}`,
data: id
}));
for (var key in clients) {
clients[key].send(JSON.stringify({
type: 'info',
message: `${id} join to us`
}));
}
});
http.createServer((req, res) => {
let indexFile = fs.readFile(path.join(__dirname, 'templates', 'index.html'), (err, file) => {
if (err) console.log(err);
res.end(file);
});
}).listen(8080);
// client side
onload = function () {
var ws = new WebSocket('ws://localhost:8888');
document.forms.push.onsubmit = function () {
// console.log("here") отрабатывает
// хз почему не отсылается
ws.send(this.message.value);
return false;
};
ws.onmessage = function (event) {
var message = JSON.parse(event.data);
var text = '';
switch (message.type) {
case 'info':
text = message.message;
break;
case 'message':
text = message.author + ': ' + message.message;
break;
default:
console.log(message.message);
break;
}
var messageElem = document.createElement('div');
messageElem.appendChild(document.createTextNode(text));
document.getElementById('subscribe').appendChild(messageElem);
};
}