您的位置：首页 > 其它

《原创》socket.io / getStarted /chat 中文翻译

2016-04-10 14:58 337 查看

官网地址：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; 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>

如果你重新启动程序（用 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是向除了自己以外的所有用户发送

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航