您的位置：首页 > 其它

socket.io系列二 聊天应用

2014-06-05 09:27 218 查看
最初的打算是对应着官网进行自己的学习和翻译，可是才使用socket.io官网开始的代码写出来demo，发现网站已改版。

那么就按照新的官网进行学习了。

开始：聊天应用

这个教程中我们将会创建一个基本的聊天应用。由于它基本上不需要nodejs与socke.io的先前准备知识，因此这个教程能被各个水平段的用户看得懂。

介绍

使用传统的Web开发工具开发一款聊天应用时很困难的，比如LAMP(PHP)。困难之处在于轮询服务器的变化、跟踪时间戳，并且消息的发送接收比较慢。

Sockets是被认为最适合及时聊天系统的架构、在服务器与客户端之间进行双向通信的解决方案。

这意味着服务器可以主动推送消息到客户端。不论合适你发出聊天消息，服务器都能获知并且推送到其他在线的用户。

网站构架


第一步是创建用于消息与表单处理的服务器。服务端，我们将用nodejs的一个web框架express。开始之前，要确保nodejs已安装。

首先，创建一个名为‘chat-example’的空文件夹。在文件夹中创建‘package.json’的文件，用于描述我们的项目：

{
"name":"socket-chat-example",
"version":"0.0.1",
"description":"my first socket.io app",
"dependencies":{}
}


为了项目所依赖的模块比较容易填写在‘dependencies’，我们将使用‘npm install --save’的命令：

npm install --save express


现在‘express’已经安装，我们可以在根目录创建'index.js'文件来开始我们的项目创建：

var app = require('express')();
var http = require('http').server(app);

app.get('/',function(req,res){
res.send('<h1>Hello world</h1>');
});

http.listen(3000,function(){
console.log('listening on 3000');
});


解释如下：

1，‘Express’初始化赋予变量‘app’作为方法应用于HTTP服务（第二行）；
2，定义一个路由方法‘/’用做我们访问网站首页的返回结果；
3，让http服务器监听3000端口。

如果你在运行‘node index.js’，你会看到下图：



如果你在chrome中访问http://127.0.0.1:3000/，你会看到如下图所示：



服务端的HTML

到目前为止，在index.js中我们用‘res.send’方法传递HTML字符串。如果这样放整个应用的HTML的话，代码会显得杂乱。因此，我们创建一个‘index.html’文件来解决。

我们用‘sendfile’来重构路由：

app.get('/',function(req,res){
res.sendfile('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; 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>
</html>


如果你重新运行程序（先命令键+C再运行‘node index’）并且刷新浏览器页面的话，你会看到如下：



Socket.io综述

Socket.io由两部分组成：

1，一个整合或者在node.js HTTP架构的服务器：socket.io
2，一个用于浏览器加载的客服端的库:socket.io-client

在开发过程中，socket.io自动连接客户端，但是我们必须要安装socket.io的模块:

npm install --save socket.io


这样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');
});

io.on('connection',function(socket){
console.log('a user connected');
});

http.listen(3000,function(){
console.log('listening on 3000');
});


我通过传递一个'http'对象初始化一个‘socket.io’的实例。然后我监听socket的‘connection’事件并且输出到面板。

在‘index.html’中增加下面的代码到‘</body>’前：

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>


这样页面将会加载到'socket.io-client'(暴漏‘io’给全局并连接)。

注意，当我调用'io()'的时候，我并没有制定任何URL，因为这样它将会默认的去尝试链接主机的首页。

假如你重启服务器并刷新页面，你会在命令版上看到'a user connected'。试着打开几个页面，你会看到几条信息:



每个socket将会有一个独特的‘disconnect’事件：

io.on('connection',function(socket){
console.log('a user connected');
socket.on('disconnect',function(){
console.log('user disconnected');
});
});


重启服务器后，如果你刷新一个页面几次，你将会看到如下：



发射事件



Socket.io的核心是你能发射和接收任何事件，包括带数据的事件。任何对象可以被编码成JSON，二进制也是支持的。

让我们做下面的事情：用户输入信息，服务器通过‘chat message’得到它。‘index.html’中‘script’的js代码改为如下:

<script src="/socket.io/socket.io.js"></script>
<script src="jquery的CDN地址"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message',$('#m').val());
$('#m').val();
return false;
});
</script>


（考虑到国内墙的环境，可以安装jquery模块或者引入本地jQuery）

‘index.js’中‘socket’的代码如下：

io.on('connection',function(socket){
socket.on('chat message',function(msg){
console.log('message：'+msg);
})
});


重启服务器刷新页面后，在文本框中输入信息按发送，将会在命令版看到你输入的信息:






Broadcasting/广播

下个目标是发送事件从服务器到其他用户。

为了发送事件给所有的人，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事件。整个客户端的代码js代码如下：

var socket = io();
$('form').submit(function(){
<span style="white-space:pre">	</span>socket.emit('chat message',$('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message',function(msg){
$('#messages').append($('<li>').text(msg));
})


整个聊天应用只需要20行代码就实现了。

作业：

有几个想法可以改善这个聊天应用：

1,有人进入或者离开聊天室的时候通知所有的用户；

2，增加用户昵称；

3，增加‘用户正在输入’的功能；

4，显示在线用户；

5，增加私信；

6，分享你的改进。

你可以在github上得到这个示例的代码。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航