Я попытался создать простое приложение для чата с помощью node.js и socket.io, чтобы освоить работу с веб-сокетами.Мне нужно иметь возможность выбрать опцию из флажков на одной странице, и она выводит значение вывода на обеих страницах, которые подключены к веб-сокету в режиме реального времени.Я просмотрел весь Интернет, и там не так много по этому вопросу.Кроме того, мне нужна помощь, чтобы выяснить, как извлечь кнопку отправки для текста, и сайт автоматически отправит готовый текст, введенный пользователем после завершения набора текста.
Это пример кода для приложения живого чата.что я пытался использовать.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebScockets 101</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
<link href="/styles.css" rel="stylesheet" />
</head>
<body>
<div id="mario-chat">
<h2>Best Practice</h2>
<div id="chat-window">
<div id="output"></div>
<div id="feedback"></div>
</div>
<label> Enter evidence of attainment</label>
<input id="message" type="text" placeholder="Enter evidence here..." />
<button id="send">Send</button>
</div>
</body>
<script src="/chat.js"></script>
</html>
chat.js:
// Make connection
var socket = io.connect('http://localhost:4000');
// Query DOM
var message = document.getElementById('message');
var handle = document.getElementById('handle');
var btn = document.getElementById('send');
var output = document.getElementById('output');
var practicenotes = document.getElementById('practicenotes');
var btn1 = document.getElementById('sendmore');
var practiceoutput = document.getElementById('practiceoutput');
var feedback = document.getElementById('feedback');
var name = document.getElementById('name');
// Emit events
btn.addEventListener('click', function(){
socket.emit('chat', {
message: message.value,
});
message.value = "";
});
// Listen for events
socket.on('chat', function(data){
output.innerHTML += '<p><strong>' + data.message + '</p>';
});
index.js:
var express = require('express');
var socket = require('socket.io');
// App setup
var app = express();
var server = app.listen(4000, function(){
console.log('listening for requests on port 4000,');
});
// Static files
app.use(express.static('public'));
// Socket setup & pass server
var io = socket(server);
io.on('connection', (socket) => {
console.log('made socket connection', socket.id);
// Handle chat event
socket.on('chat', function(data){
// console.log(data);
io.sockets.emit('chat', data);
});
});
Любая помощь с этим кодом будет принята с благодарностью.