I create a simple socket.io project in my server but I have errors
my ip that I am work on it is http://5.61.25.90/~socket
on all files are stored in public_html with URL : http://5.61.25.90/~socket/public_html
& here is my codes
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#messages { margin-bottom: 40px }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.4/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
});
</script>
</body>
</html>
the above code was the index.html file and in the bottom we have index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(port, function(){
console.log('listening on *:' + port);
});
and now I have 404 error in the console panel
like this
http://5.61.25.90/socket.io/?EIO=3&transport=polling&t=LqRzAYF 404 not found socket.io.js(line 4948)
In my opinion this could help:
app.get('*', function(req, res) {
instead of this:
app.get('/', function(req, res) {
Your app router in the backend is only catching the route '/'. So it can't handle requests, that do not match the route exactly.
Looks like you are using Apache2 virtual hosting on your server. If I'm correct, try adding these two lines to your Apache config file:
ProxyPass /socket.io/socket.io.js http://127.0.0.1:3000/socket.io/socket.io.js
ProxyPass /socket.io ws://127.0.0.1:3000/socket.io/
Related
I am using socket.io to make a basic chat application, based on the one from their website. To start off, I implemented some code that when the disconnect event is triggered, sends a message to all the other clients that someone has disconnected.
When I connect to the server with the client, after a while, it starts sending the message 'x has left the chat' even though no one has left the chat. In addition, if I open two clients and one disconnects this will also happen to the other one. How do I prevent this from happening randomly, and when someone does disconnect, how do I cause it to trigger only once?
This is how the server looks:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
socket.on('disconnect', function(){
io.emit('chat message', 'x has left the chat');
socket.disconnect(true)
});
});
http.listen(port, function(){
console.log('listening on *:' + port);
});
I did add the line socket.disconnect(true) to try to make sure that the it completely disconnects, but this doesn't help. The client is the same as on the website:
<!doctype html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#messages { margin-bottom: 40px }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
});
</script>
</body>
</html>
I just start with node.js, i install node on my hosting, add some plugins and i download socket.io sample chat from
https://github.com/socketio/chat-example.git
when i run it (node index.js) i get alert on console "listening on *:3000" and it looks like everything will work, but when i go to my site on port 3000 ( coracko.com:3000 ) chat is visible but the message does not send and nothing happen.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(port, function(){
console.log('listening on *:' + port);
});
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#messages { margin-bottom: 40px }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
});
});
</script>
</body>
</html>
if it matters script is running for now on coracko.com:3000
I use: node.js , socket.io 1.37 , express.io
My index.html:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
background: #000;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
padding: 10px;
width: 90%;
margin-right: .5%;
}
form button {
width: 9%;
background: rgb(130, 224, 255);
border: none;
padding: 10px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" />
<button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function() {
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg) {
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
My server.js :
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res) {
res.sendfile('index.html');
});
io.on('connection', function(socket) {
socket.on('chat message', function(msg) {
io.emit('chat message', msg);
});
});
http.listen(3000, function() {
console.log('listening on *:3000');
});
io.on('connect', function(socket) {
console.log('a user connected');
socket.on('disconnect', function() {
console.log('user disconnected');
});
});
I want create something like chatrandom
Random people(sockets) are connect in private room (only two sockets can join to one room)
What I need to do this? I have this code, I think it's good to start but I don't know what next.
Can you give some advice, explain ?
Before you show you users the chat box, you'll want to let them pick a unique username (and assign an ID) or something like that.
Then you'll pair them with someone else who has no chat partner(look through a list of all your current chats, let the program choose one that doesn't have two ID's associated with it), and have their interaction saved in some sort of lightweight database (Google "NoSQL for JavaScript", MongoDB is popular).
I am doing this
http://socket.io/get-started/chat/
I am on the section Emitting events
When I type a message in the text box and hit send it refreshes the page and takes me to the url
localhost:3000/?
instead of logging the message on the server.
Why is the button failing to trigger the $('form').submit(function(){ line?
If I open the JS console on chrome and enter
socket.emit("chat message", 'testing from console')
it logs the message in my commandline server window as expected. So I do not think there is an error in the server side code.
I had hand typed out everything but when it wasn't working I copy pasted to make sure I had it right.
So index.html for me is
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
and index.js is
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http)
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});
http.listen(3000, function(){
console.log('listneing on *:3000')
});
using chrome Version 47.0.2526.80 (64-bit)
Try wrapping your code in a document ready block. The form may not exist yet.
$(function(){
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
Hei so this is my socket.io chat it's from the website example...
Why is this not working?
HTML:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<div class="chatOverlay">
<div class="chatMessages"></div>
<input type="text" id="sendMessage" placeholder="Enter Chat Message..." maxlength="80">
</div>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('.chatOverlay').submit(function(){
socket.emit('chat message', $('#sendMessage').val());
$('#sendMessage').val('');
return false;
});
socket.on('chat message', function(msg){
$('.chatMessages').append($('<li>').text(msg));
console.log (msg);
});
</script>
</body>
</html>
Index.js:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
socket.on('chat message', function(msg){
io.emit('chat message', msg);
console.log('message: ' + msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
Console Log:
listening on *:3000
a user connected
a user connected
Thx for the help i need the index like this to make it work can't change it.
Not sure why it's not working i think the message is not getting send.
Thanks
It seems that you've made some mistakes copying the Socket.io chat example. First of all, you can't make a submit on a <div>. Only <form>s can be submitted. Secondly, move the <div> with messages out of the <form>, because they're unrelated with the information being submitted with your next message:
<body>
<div class="chatMessages" />
<form class="chatOverlay">
<input type="text" id="sendMessage" placeholder="Enter Chat Message..." maxlength="80">
</form>
...