Извините, если я не могу хорошо объяснить, но я разрабатывал код для приложения чата в реальном времени, используя javascript, HTML, CSS, а также WebSockets. Я создал новую страницу входа для ввода имени пользователя, так как эта опция ранее была в самом окне чата на другой странице. Но я не знаю, как переместить идентификатор дескриптора, чтобы он сохранялся для чата. Я оставлю код ниже.
index. html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Isolation Talk</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="isolation-talk">
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input id="handle" type="text" placeholder="Username" />
<input class="Login" onclick="window.location.href='chat.html'" type="button" value="Login" />
</form>
</div>
</body>
<script src="/chat.js"></script>
</html>
чат. html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Isolation Talk</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
<link href="/chat.css" rel="stylesheet" />
</head>
<body>
<div id="isolation-talk">
<div id="chat-window">
<div id="output"></div>
<div id="feedback"></div>
</div>
<input id="message" type="text" placeholder="Message" />
<input id="handle" type="text" placeholder="Username" />
<button id="send">Send</button>
</div>
</body>
<script src="/chat.js"></script>
</html>
чат. js:
// Make connection
var socket = io.connect('http://localhost:4000');
// Query DOM
var message = document.getElementById('message'),
handle = document.getElementById('handle'),
btn = document.getElementById('send'),
output = document.getElementById('output'),
feedback = document.getElementById('feedback');
// Emit events
btn.addEventListener('click', function(){
socket.emit('chat', {
message: message.value,
handle: handle.value
});
message.value = "";
});
message.addEventListener('keypress', function(){
socket.emit('typing', handle.value);
})
// Listen for events
socket.on('chat', function(data){
feedback.innerHTML = '';
output.innerHTML += '<p><strong>' + data.handle + ': </strong>' + data.message + '</p>';
});
socket.on('typing', function(data){
// Is typing feature // feedback.innerHTML = '<p><em>' + data + ' is typing a message...</em></p>';
});