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

这段代码作用如下:

  1. Express 初始化 app 作为 HTTP 服务器的回调函数 (见第 2 行)。
  2. 定义了一个路由 / 来处理首页访问。
  3. 使 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);
  });
});
    

结果应该如以下视频所示:1

广播


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

要将事件发送给每个用户,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 行代码! 最终效果如下:2

课外练习


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

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

获取示例


可以从 GitHub 获取

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号