socket.io 官方文档翻译1

原文地址:(https://socket.io/get-started/chat/

开始:聊天应用

在本指南中, 我们将创建一个基本的聊天应用。它几乎不需要基本的node.js 或socket.i相关的知识, 所以它是所有知识级别的用户的理想选择。

介绍

传统上,使用流行的Web应用程序堆栈(如LAMP,PHP)编写聊天应用程序非常困难。它涉及到轮询服务器的更改,跟踪时间戳,而且比预期慢很多。

socket一直是大多数实时聊天系统架构的解决方案,其提供了客户端与服务器之间的双向通信通道。

这意味着服务器可以将消息推送到客户端。任何时候你发出一个聊天信息,服务器将获取到它后就会把信息推送给所有其他连接的客户端。

web框架

首先我们需要有一个简单的HTML页面,提供表单和消息列表。为此,我们将使用Node.JS Web框架。确保你已安装Node.JS。

首先让我们创建一个描述我们项目的package.json清单文件。我建议你把它放在一个专用的空目录中(我的目录是chat-example)。

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

现在,为了方便地用我们需要的东西填充依赖关系,我们将使用npm install --save:

npm install --save express@4.15.2

现在, 安装完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行所示)。
2.我们定义了一个路由/,当我们点击网站首页时这是函数就会被调用。
3.我们让 http 服务器监听端口3000。
如果运行节点index.js, 您应该看到以下内容:

image

如果您将浏览器指向 http://localhost:3000:

HTML服务

到目前为止,在index.js中我们调用res.send传递一个 HTML 字符串。如果我们把整个应用程序的 HTML 放在那里, 我们的代码看起来会非常混乱。因此, 我们创建一个index.html 文件来提供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)并刷新页面,你应该看到如下页面:
image

集成Socket.IO

Socket.IO由两部分组成:
*集成或则安装在Node.JS http服务上的:socket.io
*通过浏览器端加载的客服端库:socket.io-client

在开发过程中, socket.io 为我们自动扮演客服端的角色, 所以现在我们只需要安装一个模块:
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(__dirname + '/index.html');
});

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

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

请注意,我通过传递http(HTTP服务器)对象来初始化一个新的socket.io实例。然后我监听传入sockets的连接事件,并将其输出到控制台。

现在在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"

尝试着多打开几个tab页面,然后你会看到几条消息:


image

每一个socket连接都会触发一个特殊的disconnect事件:

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

接下来,尝试刷新几遍页面,你将看到下面的结果:


image

发送事件

Socke.IO的主要思想是你可以发送和接收你想要的任何事件,使用任何你想要的数据。任何对象都可以用JSON进行编码,同样支持二进制数据:

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    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);
  });
});

效果如下面的视频所示:贴出地址:(https://i.cloudup.com/transcoded/zboNrGSsai.mp4)
好像我打不开

广播

下一步我们的目标是将事件从服务器发送到用户。
为了将事件发送到每一个用户,Socket.IO给我们提供了io.emit:
io.emit('some event', { for: 'everyone' });
如果你想发送一个消息给除了特定socket以外的每个人,我们有广播标志:

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);
  });
});

在客户端,当我们捕获聊天消息事件时,我们会将其包含在页面中。总的客户端JavaScript代码如下:

<script>
  $(function () {
    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>

这就完成了我们的聊天应用程序,大约有20行代码!这是它的样子:
(https://i.cloudup.com/transcoded/J4xwRU9DRn.mp4)

作业

以下是改进应用程序的一些建议:
*当有人连接或断开连接时,将消息广播给连接的用户
*添加对昵称的支持
*不要将相同的消息发送给自己发送的用户。相反,只要他按下输入,就直接追加消息。
*添加“{user}正在输入”功能
*显示谁在线
*添加私人消息
*分享您的改进!

获得这个例子
你可以在GitHub上找到它。
$ git clone https://github.com/socketio/chat-example.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容