Я изучаю node js и Websockets. Я создал очень простое приложение для чата, используя некоторые учебники и др. c. Сейчас я запускаю его на локальном хосте. Но как мне поставить его на мой реальный домен? Теперь он перечисляет порт 4000 и URL localhost: 4000. Но я не знаю, что мне нужно изменить, чтобы это работало на моем сайте. Я пытаюсь загрузить свой код на мой уже размещенный сайт. Но я не знаю, что мне нужно для этого изменить в моем коде. (что будет работать)
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);
});
// Handle typing event
socket.on('typing', function(data){
socket.broadcast.emit('typing', data);
});
});
chat.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){
feedback.innerHTML = '<p><em>' + data + ' is typing a message...</em></p>';
});
body{
font-family: 'Nunito';
}
h2{
font-size: 18px;
padding: 10px 20px;
color: #575ed8;
}
#mario-chat{
max-width: 600px;
margin: 30px auto;
border: 1px solid #ddd;
box-shadow: 1px 3px 5px rgba(0,0,0,0.05);
border-radius: 2px;
}
#chat-window{
height: 400px;
overflow: auto;
background: #f9f9f9;
}
#output p{
padding: 14px 0px;
margin: 0 20px;
border-bottom: 1px solid #e9e9e9;
color: #555;
}
#feedback p{
color: #aaa;
padding: 14px 0px;
margin: 0 20px;
}
#output strong{
color: #575ed8;
}
label{
box-sizing: border-box;
display: block;
padding: 10px 20px;
}
input{
padding: 10px 20px;
box-sizing: border-box;
background: #eee;
border: 0;
display: block;
width: 100%;
background: #fff;
border-bottom: 1px solid #eee;
font-family: Nunito;
font-size: 16px;
}
button{
background: #575ed8;
color: #fff;
font-size: 18px;
border: 0;
padding: 12px 0;
width: 100%;
border-radius: 0 0 2px 2px;
}
<!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>heavy shit</h2>
<div id="chat-window">
<div id="output"></div>
<div id="feedback"></div>
</div>
<input id="handle" type="text" placeholder="Handle" />
<input id="message" type="text" placeholder="Message" />
<button id="send">Send</button>
</div>
</body>
<script src="/chat.js"></script>
</html>