用Flutter、Socket.io和Node.js打造一对一实时聊天app(上)

我之前写的博客(可在 此处 进行阅读)主要讨论的都是关于如何用socket.io启动实时聊天并构建一个简单的一对多的的线上聊天app。而在本篇文章中,我会和大家一起讨论如何构建一个一对一线上聊天app进行讨论。

你能学到什么?

  • 使用socket.io在两个设备之间创建实时连接
  • 理解rooms的概念以及如何用socket.io使用它们
  • 一定范围的模型库 :sweat_smile:

要求

在你的PC端安装并运行以下内容:

Rooms

Rooms是逻辑分组机制,它们只能用于特定的而不是全部的socket。

让我们通过简单的图形来对进行理解:

以前,当一个用户正在发送一条消息时,服务器就会把消息传送给其他全部用户。


使用room之前

而使用rooms的话,服务器就会把消息只发给指定用户。


使用room之后

这样我们就能使用rooms进行一对一的聊天了,接下来我们就开始吧。

Node.js (Server-Side)

创建一个新的node项目并安装以下依赖项:

找到 package.json并添加dev脚本:

1_EMbJnRl2LPlIE8NV0W104Q
package.json中的dev脚本

接下来在index.js文件中添加以下代码:

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

app.get('/', (req, res) => {
    res.send("Node Server is running. Yay!!")
})

io.on('connection', socket => {
    //Get the chatID of the user and join in a room of the same chatID
    chatID = socket.handshake.query.chatID
    socket.join(chatID)

    //Leave the room if the user closes the socket
    socket.on('disconnect', () => {
        socket.leave(chatID)
    })

    //Send message to only a particular user
    socket.on('send_message', message => {
        receiverChatID = message.receiverChatID
        senderChatID = message.senderChatID
        content = message.content

        //Send message to only that particular room
        socket.in(receiverChatID).emit('receive_message', {
            'content': content,
            'senderChatID': senderChatID,
            'receiverChatID':receiverChatID,
        })
    })
});

http.listen(process.env.PORT)

每个连接到我们服务器的用户都有一个特定的chatID,并且这个ID就是他们加入房间时的ID。所以如果有人想对某个指定用户发送消息,首先就需要知道对方的ID。

现在我们服务器端的代码已经完成,那接下来我们应该将它部署到Heroku

在名为Procfile的根目录中创建一个新文件,添加以下行:

web: node index.js

再创建一个名为.gitignore的文件并添加以下行:

/node_modules

之后,初始化git并提交所有内容。创建一个新的heroku app并把所有内容推送到master分支。如果你遇到任何问题,具体可参考我之前的 博客 或者 heroku文档

由于篇幅限制,可点击这里继续阅读。

原文作者 Ibtesam Ansari

原文链接https://medium.com/flutter-community/realtime-chat-app-one-to-one-using-flutter-socket-io-node-js-acd4152c6a00