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

官网地址: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是向除了自己以外的所有用户发送

原文地址:https://www.cnblogs.com/obeing/p/5374185.html