什么是最简单的Socket.io示例的例子?
所以,最近我一直在试图理解Socket.io,但是我不是一个超级大的程序员,几乎每一个我能在网上find的例子(相信我已经找了几个小时),有更多的东西让事情变得复杂。 很多例子都会让我困惑,或者连接到一些奇怪的数据库,或者使用coffeescript或者大量的JS库来混淆事物。
我很想看到一个基本的运行示例,服务器每隔10秒向客户端发送一条消息,说明它是什么时间,客户端将数据写入页面或抛出一个警报,这非常简单。 然后我可以从那里弄清楚什么东西,添加我需要的东西像数据库连接等。是的,我已经检查了socket.io网站上的例子,他们不为我工作,我不明白他们做什么。
编辑:我觉得任何人都可以参考Socket.IO入门页面上的优秀聊天示例 。 自从我提供了这个答案以来,API已经非常简单了。 这就是说,这里是原来的答案更新小小的更新的API。
只因为我今天感觉很好
的index.html
<!doctype html> <html> <head> <script src='/socket.io/socket.io.js'></script> <script> var socket = io(); socket.on('welcome', function(data) { addMessage(data.message); // Respond with a message including this clients' id sent from the server socket.emit('i am client', {data: 'foo!', id: data.id}); }); socket.on('time', function(data) { addMessage(data.time); }); socket.on('error', console.error.bind(console)); socket.on('message', console.log.bind(console)); function addMessage(message) { var text = document.createTextNode(message), el = document.createElement('li'), messages = document.getElementById('messages'); el.appendChild(text); messages.appendChild(el); } </script> </head> <body> <ul id='messages'></ul> </body> </html>
app.js
var http = require('http'), fs = require('fs'), // NEVER use a Sync function except at start-up! index = fs.readFileSync(__dirname + '/index.html'); // Send index.html to all requests var app = http.createServer(function(req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end(index); }); // Socket.io server listens to our app var io = require('socket.io').listen(app); // Send current time to all connected clients function sendTime() { io.emit('time', { time: new Date().toJSON() }); } // Send current time every 10 secs setInterval(sendTime, 10000); // Emit welcome message on connection io.on('connection', function(socket) { // Use socket to communicate with this particular client only, sending it it's own id socket.emit('welcome', { message: 'Welcome!', id: socket.id }); socket.on('i am client', console.log); }); app.listen(3000);
这是我的提交!
如果你把这段代码放到一个名为hello.js的文件中,并使用节点hello.js来运行它,它应该打印出hello消息,它已经通过2个套接字发送了。
该代码显示了如何处理通过标记为// Mirror的代码部分从客户端弹回到服务器的hello消息的variables。
variables名是在本地声明的,而不是全部在顶部,因为它们只用在注释之间的每个部分。 其中的每一个都可以在一个单独的文件中,并作为自己的节点运行。
// Server var io1 = require('socket.io').listen(8321); io1.on('connection', function(socket1) { socket1.on('bar', function(msg1) { console.log(msg1); }); }); // Mirror var ioIn = require('socket.io').listen(8123); var ioOut = require('socket.io-client'); var socketOut = ioOut.connect('http://localhost:8321'); ioIn.on('connection', function(socketIn) { socketIn.on('foo', function(msg) { socketOut.emit('bar', msg); }); }); // Client var io2 = require('socket.io-client'); var socket2 = io2.connect('http://localhost:8123'); var msg2 = "hello"; socket2.emit('foo', msg2);
也许这也可以帮助你。 在socket.io的工作方式上,我的头被缠上了一些麻烦,所以我试着尽可能多地烧掉一个例子。
我从这里发布的例子中调整了这个例子: http : //socket.io/get-started/chat/
首先,从一个空目录开始,创build一个名为package.json的非常简单的文件。
{ "dependencies": {} }
接下来,在命令行中,使用npm来安装我们需要的依赖关系
$ npm install --save express socket.io
这可能需要几分钟,具体取决于networking连接/ CPU等的速度。要检查一切是否按计划进行,可以再次查看package.json文件。
$ cat package.json { "dependencies": { "express": "~4.9.8", "socket.io": "~1.1.0" } }
创build一个名为server.js的文件这显然是我们的服务器运行的节点。 放置下面的代码:
var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ //send the index.html file for all requests res.sendFile(__dirname + '/index.html'); }); http.listen(3001, function(){ console.log('listening on *:3001'); }); //for testing, we're just going to send data to the client every second setInterval( function() { /* our message we want to send to the client: in this case it's just a random number that we generate on the server */ var msg = Math.random(); io.emit('message', msg); console.log (msg); }, 1000);
创build最后一个名为index.html的文件,并将下面的代码放入其中。
<html> <head></head> <body> <div id="message"></div> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); socket.on('message', function(msg){ console.log(msg); document.getElementById("message").innerHTML = msg; }); </script> </body> </html>
您现在可以testing这个非常简单的示例,并看到类似于以下的一些输出:
$ node server.js listening on *:3001 0.9575486415997148 0.7801907607354224 0.665313188219443 0.8101786421611905 0.890920243691653
如果打开一个Web浏览器,并将其指向正在运行节点进程的主机名,则应该看到浏览器中显示相同的编号,以及查看该页面的其他任何连接的浏览器。
我意识到这个职位现在已经有好几年了,但是有时候,像我这样的authentication新手需要一个完整的绝对最简单的例子。
每一个简单的socket.io例子,我可以find涉及http.createServer()。 但是如果你想在现有的网页中包含一些socket.io魔术呢? 这里是我能想出的绝对最简单最小的例子。
这只是返回从控制台UPPERCASED传递的string。
app.js
var http = require('http'); var app = http.createServer(function(req, res) { console.log('createServer'); }); app.listen(3000); var io = require('socket.io').listen(app); io.on('connection', function(socket) { io.emit('Server 2 Client Message', 'Welcome!' ); socket.on('Client 2 Server Message', function(message) { console.log(message); io.emit('Server 2 Client Message', message.toUpperCase() ); //upcase it }); });
index.html的:
<!doctype html> <html> <head> <script type='text/javascript' src='http://localhost:3000/socket.io/socket.io.js'></script> <script type='text/javascript'> var socket = io.connect(':3000'); // optionally use io('http://localhost:3000'); // but make *SURE* it matches the jScript src socket.on ('Server 2 Client Message', function(messageFromServer) { console.log ('server said: ' + messageFromServer); }); </script> </head> <body> <h5>Worlds smallest Socket.io example to uppercase strings</h5> <p> <a href='#' onClick="javascript:socket.emit('Client 2 Server Message', 'return UPPERCASED in the console');">return UPPERCASED in the console</a> <br /> socket.emit('Client 2 Server Message', 'try cut/paste this command in your console!'); </p> </body> </html>
跑步:
npm init; // accept defaults npm install socket.io http --save ; node app.js &
使用像这个端口testing,以确保您的端口是开放的。
现在浏览到http://localhost/index.html并使用浏览器控制台将消息发送回服务器。
在最好的猜测,当使用http.createServer,它为您更改以下两行:
<script type='text/javascript' src='/socket.io/socket.io.js'></script> var socket = io();
我希望这个简单的例子可以让我的新手们有些挣扎。 请注意,我远离使用“保留字”查找我的套接字定义的用户定义的variables名称。