node.js之socket.io模块
socket.io模块是一个基于Node.js的项目,其作用主要是将WebSocket协议应用到所有的浏览器。该模块主要应用于实时的长连接多请求项目中,例如在线联网游戏、实时聊天、实时股票查看、二维码扫描登录等。——Node.js开发实战详解
安装和配置的方法和一般的NPM模块安装配置一致:
# npm install soctet.io
应该是因为我的本地服务器是win7操作系统,所以在安装的时候会有一堆错误提示,但是貌似不影响使用socket.io模块,没有太在意这个。不知道在linux上是不是也这样,等有时间会去我的服务器上试一下。
这里推荐一个官方的socket.io模块的实例教程,实现了一个在线聊天的功能,对学习这个模块有不小的帮助。
接下来介绍一下socket.io中常用的接口。
1.io.sockets.on('connection',function(socket){}):这个接口是socketAPI中的socket.on接口,它和下面的socket.on接口有一点区别。每当有用户连接时,它都会执行一次回调函数。这里有三点需要注意,io.sockets.on中是sockets,发送的事件名为connection,还有回调函数需要传入一个参数socket。
2.soctet.on('event',function(){}):这个的作用是接收到事件后执行回调函数。第一个参数是事件名,第二个参数是要执行的回调函数。
3.socket.emit('event',{test:'hello world'},function(){}):这个接口是发送一个事件。第一个参数是事件名,第二个参数是发送的数据内容,第三个参数是需要执行的回调函数。
4.socket.broadcast.emit('event',function(){}):就和他的接口名一样会像广播发给其他连接网站的用户。但是有一点比较费解,他不会发给来源,打个比方:A用户连接网站时会给服务器发送一个连接事件,服务器收到后用这个接口广播发给所有连接着的用户一个通知事件,然后用户B、用户C……都能收到这个通知事件,而用户A不会收到。
5.socket.send('hello'):第一个参数是发送的数据,和emit类似,都是用来发送数据,但是如果用send发送,无法指定事件名,接收时会用message事件来接收,而emit可以自己定义事件名来接收数据。因此通常都是用emit,不建议使用send。
6.socket.get/set('foo', bar, function () {}):第一个参数是数据名,第二个参数是发送的数据,第三个是回调函数,set用来进行保存数据的操作,get用来取出已保存的数据。
最后贴上我自己测试用的代码:
server:
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.broadcast.emit('hi'); socket.on('chat message', function(msg){ io.emit('chat message', msg); }); socket.on('disconnect', function(){ console.log('user disconnected'); }); }); io.emit('some event', { for: 'everyone' }); http.listen(3000, function(){ console.log('listening on *:3000'); });
client:
<!doctype html> <html> <head> <title>Socket.IO chat</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.7/socket.io.js"></script> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <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> </body> <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)); }); socket.on('hi', function(msg){ console.log('hi'); }); </script> </html>