socket.io做成的一个群聊的dome

入门：聊天应用程序

在本指南中，我们将创建一个基本的聊天应用程序。它需要的Node.js和Socket.IO几乎没有基本的先验知识，所以它是适合于所有知识水平的用户。

介绍

写作与流行的Web应用程序的聊天应用程序堆栈样LAMP（PHP）传统上一直很努力。它涉及投票更改服务器，跟踪时间戳，它是慢很多比它应该是。

插座历来围绕其最实时聊天系统架构，提供了一个客户机和一个服务器之间的双向通信信道的解。

这意味着服务器可以推送消息客户端。当你写一个聊天消息，这个想法是，服务器将得到它，把它推到其他所有连接的客户端。

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：

npm install --save [email protected]

现在快递安装，我们可以创建一个index.js文件，该文件将设置我们的应用程序。

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

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

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

这转化为以下内容：

1. 快速初始化app是，你可以提供一个HTTP服务器（如线2所示）的函数处理。
2. 我们定义路由处理程序/时，我们打我们的网站首页被调用。
3. 我们做http服务器3000端口监听。

如果你运行node index.js你应该看到以下内容：

如果你的浏览器指向http://localhost:3000：

服务HTML

到目前为止，index.js我们调用res.send并传递一个HTML字符串。如果我们只是放在我们整个应用程序的HTML有我们的代码会显得很混乱。相反，我们要创建一个index.html文件，并为它服务。

让我们来重构我们的路由处理程序使用sendFile，而不是：

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

和填充index.html有以下内容：

  
    
    
  
  
    

    

      Send
    
  

如果您重新启动该进程（通过按Ctrl + C组合并运行node index一次），并刷新页面就应该是这样的：

整合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('index.html');
});

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

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

注意，我初始化的一个新实例socket.io通过使http（HTTP服务器）对象。后来我听的connection传入套接字事件，我把它登录到控制台。

现在，在我的index.html之前，添加以下代码片段：

这一切都需要加载socket.io-client，这暴露了一个io全球性的，然后连接。

请注意，我没有指定任何URL当我打电话io()，因为它默认为试图连接到服务于网页的主机。

如果你现在重新加载服务器和网站，你应该看到控制台打印“连接的用户”。
尝试打开几个选项卡，你会看到一些消息：

每个插座还触发一个特殊的disconnect事件：

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

然后，如果你刷新标签多次，你可以看到它在行动：

发射事件

背后Socket.IO的主要思想是，你可以发送和接收任何你想要的事件，你想要的任何数据。这可以被编码为JSON会做任何对象，二进制数据太支持。

让我们这样，当用户键入消息，服务器得到它作为一个chat message事件。在script以s节index.html现在应如下所示：

而在index.js我们打印出来的chat message事件：

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

该结果应该是像下面的视频：

广播

下一个目标是为我们从服务器事件发射到用户的其余部分。

为了将事件发送给大家，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的事件，我们就会将它包含在页面中。总的客户端JavaScript代码现在金额为：

这完成了我们的聊天应用，在大约20行代码！这是什么样子：