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

来源：互联网发布：兼职在家做数据录入编辑：程序博客网时间：2024/05/17 08:07

入门：聊天应用程序

在本指南中，我们将创建一个基本的聊天应用程序。它需要的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 express@4.10.2

现在快递安装，我们可以创建一个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');});

这转化为以下内容：

快速初始化app是，你可以提供一个HTTP服务器（如线2所示）的函数处理。
我们定义路由处理程序/时，我们打我们的网站首页被调用。
我们做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有以下内容：

<!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一次），并刷新页面就应该是这样的：

整合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之前，添加以下代码片段</body>：

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

这一切都需要加载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现在应如下所示：

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

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

广播

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

为了将事件发送给大家，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代码现在金额为：

<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>这完成了我们的聊天应用，在大约20行代码！这是什么样子：

0 0