官网地址:http://socket.io/get-started/chat/
开始:聊天应用程序
在这份指引中我们将创建一个聊天基本程序。它几乎不需要任何node.js获取Socket.io的知识。
所以对任何水平的使用者都是理想的使用方案。
介绍:
一直以来用流行的网络程序框架如LAMP来写一个聊天程序是非常困难的。它是利用轮询服务器、
跟踪标记时间戳来实现变化的,因此它要慢的多。
由于sockets提供了一个在客户端和服务器之间双向的聊天通道,它已经成为了现在用的最多的
实时聊天系统框架的解决方法。
这意味着无论你什么时候写了一条信息,服务器都能推送到客户端。主要是通过服务器获取到这一条数据
然后推送到所有连接了的客户端中实现的。
web 框架
第一个目标是去实现一个表格和一列消息简单的html网页。我们为此将使用node.js的web
框架 express.在这之前你必须确保你已经安装了node.js
首先,让我们创建一个描述我们项目的package.json清单文件,我推荐你将它放在一个特定的
空目录下。(我命名为chat-example)
{ "name": "socket-chat-example", "version": "0.0.1", "description": "my first socket.io app", "dependencies": {} }
现在,为了容易地在dependencies中填写我们需要依赖的东西,我们使用npm install --save
命令。现在express已经安装成功了,我们可以创建一个index.js文件来启动我们的程序
var app = require('express')(); var http = require('http').Server(app);(1) app.get('/', function(req, res){(2) res.send('<h1>Hello world</h1>'); }); http.listen(3000, function(){(3) console.log('listening on *:3000'); });
介绍如下:
1:Express 初始化 app 为一个处理函数,你可以供应到http服务(1)
2.我们定义一个路由'/'处理函数,当我们访问的时候执行函数(2)
3.我们让http 服务器监听3000端口(3)
如果你运行 node index.js 你会看到下面这种情况
如果你在浏览器访问 http://localhost:3000
HTML
在index.js中我们调用res.send然后传递一个html字符串。如果我们将我们整个的程序的html
代码都放在index.js中我们的代码将变得非常混乱。所以我们将创建一个index.html文件。
让我们重构我们的路由使用sendfile代替
app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); });
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; 100%; } form input { border: 0; padding: 10px; 90%; margin-right: .5%; } form button { 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> </html>
如果你重新启动程序(用 ctrl+c 停止服务然后 node index.js 重新运行)并且
在浏览器中刷新页面它就会像这样显示
整合socket.io
socket.io由两部分组成
1.一个基于node.js http Server的服务:socket.io
2.一个在浏览器加载的客户端库:socket.io-client
在发展过程中,socket.io自动服务客户端,所以我们现在字需要安装一个modu
即可 npm install --save socket.io
执行后将会安装模块并且在package.json中增加依赖。现在我们编辑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('index.html'); });//这里的sendfile 翻译时已经被提示过时了,用sendFile绝对路径代替 io.on('connection', function(socket){ console.log('a user connected'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });
注意我初始化了一个socket.io实例去传递http对象。然后我给将有的sickets监听connection事件
然后console.log()提示
现在在index.html我在<body>之前增加以下语句
<script src="/socket.io/socket.io.js"></script>//注意此处的路径,本人将socket.io.复制到本路径下改变路径使用时会报错的,此处应该引用的是node_module中的socket.io模块,所以使用时要抽取出来,路径一般都是这样写的,不要随便乱改 <script> var socket = io(); </script>
因为它需要加载socket.io-client module,导入一个全局的io并且连接
注意我并没有制定任何路径,因为它默认为本地服务器
如果你现在重新启动服务器,你会在看到console打印出a user connected
尝试打开多几个页面,你会看到几条信息
事件发布
socket.io背后隐含的作用是你可以发送和接受任何你想要的事件或者数据。包括任何可以被
转换成json格式的对象或者二进制数据
让我们定义一个当用户发送信息的事件,服务器会获取这个消息事件。index.和html中的
脚本代码应该这样写
<script src="/socket.io/socket.io.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>
在index.js中输出chat message的消息
io.on('connection', function(socket){ socket.on('chat message', function(msg){ console.log('message: ' + msg); }); });
现在在浏览器输入的消息就可以在cmd上出现了
传播
下一步的目标是将事件从服务器传给其他的用户
为了把事件传给每一个人,socket.io给我们io.emit
io.emit('some event', { for: 'everyone' });
如果你想把消息传给每一个人除了特定的人,我们可以定义broadcast标记
io.on('connection', function(socket){ socket.broadcast.emit('hi'); });
在这个例子中为了简单,我们将把消息传到所有人,包括发送者
io.on('connection', function(socket){ socket.on('chat message', function(msg){ io.emit('chat message', msg); }); });
那么现在客户端捕获了chat message事件以后,我们就可以将消息放在页面上,全部的脚本
应该如下
<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>
完成!
io.emit是向所有人发送数据
socket.emit是向自己发送
socket.broadcast.emit是向除了自己以外的所有用户发送