Menu
I am trying to setup a WebSocket to run a simple chat app.
I have a user using a PHP app that is running on server A. On the other side, I have Server B which is running a WebSocket using node.js and Socket.io.
I followed the Socket.io tutorial on writing a small chat app. But it seems that I need to include the socket.io.js file in my client's script to start the connection between the user and the Websocket. But, I can't seems to figure out where to get the socket.io.js file from.
Where can I find socket.io.js at?
Not sure if my code matter or not in this case but here it is if needed.
Here is my socket.js file "Websocket" server
var env = require('./config');
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(env.socket.port, env.socket.host, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
app.get('/', function (req, res) {
res.send('Landed!');
});
io.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
Here is my client code
<!doctype html>
<html lang="en-US">
<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="/socket.io.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.0.min.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>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
242
Your HTML is incorrect. Here's the line you need:
<script src="/socket.io/socket.io.js"></script>
It's confusing because there's no obvious socket.io.js file just sitting there on disk. It's served automatically by socket.io within your express web application but the path /socket.io/socket.io.js is totally virtual and does not map directly to directories or files on the filesystem.
Here's the source code where the socket.io server loads the socket.io.js file source code from the socket.io-client npm module, which it will then send to the browser when the URL /socket.io/socket.io.js is requested.
If you want to just grab the file and stick it in your PHP server, it lives here on the official socket.io-client github repo
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
