概述

1.使用LAMP（PHP）等流行的Web应用程序堆栈编写聊天应用程序通常非常困难。它涉及轮询服务器的更改，跟踪时间戳，并且比预期的要慢得多。
2.传统上，套接字是构建大多数实时聊天系统的解决方案，可在客户端和服务器之间提供双向通信通道。
3.这意味着服务器可以将消息推送到客户端。每当您编写聊天消息时，其想法都是服务器将获得该消息并将其推送到所有其他已连接的客户端。

安装scoket.io

Socket.IO由两部分组成：

• 1.与Node.JS HTTP Server socket.io集成（或安装在其上）的服务器
• 2.在浏览器端加载的客户端库socket.io-client

socket.io如我们所见，在开发过程中，将自动为我们服务客户端，因此，现在我们只需要安装一个模块：

npm install socket.io

这将安装模块并将依赖项添加到中package.json

{
    "name": "zmz",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "~4.16.0",
        "ejs": "^2.6.1",
        "socket.io":"^3.0.3"
    }
}

服务器端

现在让我们进行编辑index.js以添加它：

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

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

// 在此处接收
io.on('connection', (socket) => {
  console.log('a user connected');
});
// 监听服务器
http.listen(3000, () => {
  console.log('listening on *:3000');
});

请注意，我socket.io通过传递http（HTTP服务器）对象初始化的新实例。然后，我在connection事件中监听传入的套接字，并将其记录到控制台。

浏览器端

现在在index.html中，在</body>（end body标签）之前添加以下代码段：

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

这就是加载socket.io-client，暴露io全局（和端点GET /socket.io/socket.io.js ）然后进行连接所需的全部工作。
如果您想使用客户端JS文件的本地版本，可以在找到它node_modules/socket.io-client/dist/socket.io.js。
请注意，调用时我没有指定任何URL io()，因为它默认为尝试连接到为该页面提供服务的主机。
如果现在重新启动该过程（通过按Control + C并node index.js再次运行）然后刷新网页，则应该看到控制台打印“用户已连接”。
尝试打开多个标签，您将看到几条消息。

每个套接字还引发一个特殊disconnect事件：

io.on('connection', (socket) => {
    console.log('a user connected');
    // 断开事件
    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
});

然后，如果多次刷新选项卡，则可以看到它的作用。

接收事件

Socket.IO的主要思想是可以发送和接收所需的任何事件以及所需的任何数据。任何可以被编码为JSON的对象都可以，并且也支持二进制数据。
让我们做到这一点，以便用户输入消息时，服务器将其作为chat message事件获取。现在的script部分index.html应如下所示：

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        var socket = io();
        $('form').submit(function(e) {
            e.preventDefault(); // prevents page reloading
            socket.emit('chat message', $('#m').val());
            $('#m').val('');
            return false;
        });
    });
</script>

然后index.js我们打印出chat message事件：

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

发送事件

下一个目标是我们将事件从服务器发送给其他用户。为了向所有人发送事件，Socket.IO向我们提供了该io.emit()方法。

io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' });
// This will emit the event to all connected sockets

如果要向除某个发射套接字之外的所有人发送消息，我们具有broadcast从该套接字发射的标志：

io.on('connection', (socket) => {
    socket.broadcast.emit('hi');
});

在这种情况下，为简单起见，我们会将消息发送给所有人，包括发件人。

io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });
});

在客户端，当我们捕获chat message事件时，会将其包括在页面中。在总的客户端JavaScript代码，现在金额为：

<script>
    $(function () {
    var socket = io();
    $('form').submit(function(e){
        e.preventDefault(); // prevents page reloading
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });
    socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
    });
});
</script>

想详细了解请访问官方gitgit clone https://github.com/socketio/chat-example.git