阅读(77.4k) 书签赞(4) 我要纠错

socket.io 快速入门教程——聊天应用

2020-08-10 10:39 更新

本教程将创建一个基本的聊天应用。它几乎不要求你事先了解 Node.JS 或 Socket.IO ，适合所有知识层次的用户。

简介

使用流行的 web 应用技术栈 —— 比如 LAMP (PHP) —— 来编写聊天应用通常是很困难的。它包含了轮询服务器以检测变化，还要追踪时间戳，并且这种实现是比较慢的。

大多数实时聊天系统通常基于 socket 来构建。 Socket 为客户端和服务器提供了双向通信机制。

这意味着服务器可以推送消息给客户端。无论何时你发布一条消息，服务器都可以接收到消息并推送给其他连接到服务器的客户端。

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

这段代码作用如下：

Express 初始化 app 作为 HTTP 服务器的回调函数（见第 2 行）。
定义了一个路由 / 来处理首页访问。
使 http 服务器监听端口 3000。

运行 node index.js 就可以看到如下画面：

socket.io 快速入门教程——聊天应用

在浏览器中访问 http://localhost:3000：

socket.io 快速入门教程——聊天应用2

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>

现在重启进程（按 Control+C ，然后再次运行 node index），刷新页面显示如下：

socket.io 快速入门教程——聊天应用3

集成 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 的一个实例。然后监听 connection 事件来接收 sockets，并将连接信息打印到控制台。

在 index.html 的 </body> 标签中添加如下内容：


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

这样就加载了 socket.io-client。 socket.io-client 暴露了一个 io 全局变量，然后连接服务器。

请注意我们在调用 io() 时没有指定任何 URL，因为它默认将尝试连接到提供当前页面的主机。

重新加载服务器和网站，你将看到控制台打印出 “a user connected”。
尝试打开多个标签页，可以看到多条信息：

socket.io 快速入门教程——聊天应用4

每个 socket 还会触发一个特殊的 disconnect 事件：


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

你可以多次刷新标签页来查看效果：

socket.io 快速入门教程——聊天应用5

触发事件

Socket.IO 的核心理念就是允许发送、接收任意事件和任意数据。任意能被编码为 JSON 的对象都可以用于传输。二进制数据也是支持的。

这里的实现方案是，当用户输入消息时，服务器接收一个 chat message 事件。index.html 文件中的 script 部分现在应该内容如下：


<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js" rel="external nofollow" ></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);
  });
});

结果应该如以下视频所示：

广播

接下来的目标就是让服务器将消息发送给其他用户。

要将事件发送给每个用户，Socket.IO 提供了 io.emit 方法：

io.emit('some event', { for: 'everyone' });

要将消息发给除特定 socket 外的其他用户，可以用 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>
  $(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 行代码！最终效果如下：

课外练习

下面是一些可以做的优化：

当用户连接和断开连接时广播消息
添加昵称
不要将消息发送给服务器后再返回给发送者，应该在用户按下回车后立即将消息显示到消息列表。
添加 “{用户} 正在输入” 功能
显示在线用户
添加私密消息
分享你的改进！

获取示例

可以从 GitHub 获取。

$ git clone https://github.com/socketio/chat-example.git

以上内容是否对您有帮助：

← socket.io 概述

socket.io 服务端API →

写笔记

我要补充