即时聊天室开发（即时聊天 开源）

先此声明，这个即时聊天室是我个人平常进行应用技术研究时顺带着开发的一个作品，随着应用技术研究的进行，这个作品暂定也会进行版本的迭代。先上个效果图。

如效果图所示，页面上只有3个元素。第1个元素是聊天内容展示的部分，第2个元素是底部左侧的输入框，第3个元素是底部右侧的发送按钮。这张效果图是app端的页面，实际上还会支持H5和小程序端，由于效果都一样，所以只需要以app端为例展示一下就好。

聊天室设计后面进来的人看不到进来之前产生的聊天内容，再展示一张后面进来的人的视角图

这是一张H5端的效果图

在了解完目前版本的设计后，我将要介绍下相关的应用技术。

应用技术方面，前端采用uniapp框架，后端采用easyswoole框架。

关于这些技术框架的使用是需要先行进行相关软件的部署的。我是在我本地部署的软件，如果将来要在生产环境上部署其实也差不了多少，下面我先介绍下在我本地部署的软件。

我的计算机操作系统是windows10家庭中文版

先讲下后端框架相关软件的部署

1.安装VMware Workstation Pro。这是个虚拟机，将用来部署一个centos7系统

2.安装PuTTY。便于操作centos7系统

3.部署完centos7后，在centos7上安装宝塔。装这个集成环境是为了管理方便一些

4.通过宝塔安装nginx，php7.4，mysql5.6。nginx装个新版的就好，php要选择7.3或以上版本的，mysql选择5.6是因为我计算机硬件内存只分配了1G给centos7（硬件内存宽裕可以选择更高版本的mysql）

5.编译安装swoole4.8扩展

6.安装composer

7.安装easyswoole3.5框架

然后到前端框架相关软件的部署

1.安装chrome浏览器

2.部署HBuilder X

3.安装微信开发者工具

接下来讲解一些代码，代码方面有些繁杂，建议看不懂的先看代码后面的讲解

首先我们需要将页面上看到的3种元素都摆到页面上

<template>

<view class="content">

<view class="text-area">

<text class="title" ref="content">{{title}}</text>

</view>

<view class="footer">

<view class="input-wrap">

<input class="uni-input" focus placeholder="请输入您想说的话" @input="inputdata" />

</view>

<view class="btn-wrap">

<button class="mini-btn" type="primary" size="mini" @click="send">发送</button>

</view>

</view>

</view>

</template>

其中<text class="title" ref="content">{{title}}</text>这段代码表示聊天内容部分的元素

<input class="uni-input" focus placeholder="请输入您想说的话" @input="inputdata" />这段代码表示底部左侧的输入框

<button class="mini-btn" type="primary" size="mini" @click="send">发送</button>这段代码表示底部右侧的发送按钮

然后对摆到页面上的元素调整位置

<style>

.footer{

width: 100%;

display: flex;

position: fixed;

bottom: 0;

}

.footer .input-wrap{

width: 78%;

margin-left: 2%;

}

.footer .btn-wrap{

width: 18%;

margin-right: 2%;

}

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.text-area {

display: flex;

justify-content: center;

}

.title {

font-size: 36rpx;

color: #8f8f94;

}

</style>

接下来按照操作顺序讲解代码

站在用户的角度，我们需要在输入框先输入一些聊天内容

inputdata(e){

this.send_data = e.target.value;

}

inputdata方法用来获取输入的内容并将输入内容存储到send_data这个变量中

然后点击发送按钮将输入的聊天内容发送出去

send(){

let key = uni.getStorageSync('extraLine');

key = key + this.send_data + '\n';

this.title = key;

uni.setStorageSync('extraLine', key);

this.sendSocketMessage(this.send_data);

}

send方法负责将输入的聊天内容发送出去。这里面还使用了一个用来发送socket数据的方法，如下

sendSocketMessage(msg) {

// if (socketOpen) {

uni.sendSocketMessage({

data: msg

});

// } else {

// socketMsgQueue.push(msg);

// }

}

在发送socket数据之前需要先连接好socket，一系列方法都放在onLoad里面初始化即可。

uni.connectSocket({

url: 'ws://192.168.0.110:9501'

});

uni.onSocketOpen(function (res) {

console.log('WebSocket连接已打开！');

// socketOpen = true;

// for (var i = 0; i < socketMsgQueue.length; i++) {

// this.sendSocketMessage(socketMsgQueue[i]);

// }

// socketMsgQueue = [];

});

uni.onSocketError(function (res) {

console.log('WebSocket连接打开失败，请检查！');

});

uni.onSocketMessage(function (res) {

console.log('收到服务器内容：' + res.data);

let key = uni.getStorageSync('extraLine');

key = key + res.data + '\n';

that.title = key;

uni.setStorageSync('extraLine', key);

});

uni.onSocketClose(function (res) {

console.log('WebSocket 已关闭！');

});

前端发送了聊天数据之后，那么就轮到后端来处理数据了

后端这边，我们打开EasySwooleEvent.php文件

在mainServerCreate方法中查看处理socket的代码

$register->set($register::onOpen, function ($ws, $request) {

var_dump($request->fd, $request->server);

$ws->table->set($request->fd,array('fd' => $request->fd));

});

$register->set($register::onMessage, function (\Swoole\WebSocket\Server $server, \Swoole\WebSocket\Frame $frame) {

echo "Message: {$frame->data}\n";

foreach($server->table as $row)

{

var_dump($row);

if ($frame->fd != $row['fd'])

$server->push($row['fd'], $frame->data);

}

// $server->push($frame->fd, "server: {$frame->data}");

// $model = new User();

//

// $model['name'] = $frame->data;

//

// $model->save();

});

$register->set($register::onClose, function ($ws, $fd) {

echo "client-{$fd} is closed\n";

$ws->table->del($fd);

});

其中后端如下代码是用来接收前端发送的聊天数据并处理的

$register->set($register::onMessage, function (\Swoole\WebSocket\Server $server, \Swoole\WebSocket\Frame $frame) {

echo "Message: {$frame->data}\n";

foreach($server->table as $row)

{

if ($frame->fd != $row['fd'])

$server->push($row['fd'], $frame->data);

}

});

代码方面暂时讲解到这里，接下来对下个版本进行一个简短的规划。

这个版本目前缺少心跳处理，预计下个版本会采用客户端发送服务端应答的方式来补充心跳处理以增强后端程序的健全性。虽然目前websocket的连接是自带tcp心跳处理的，但是在业务层面需要更灵活地释放资源，还是决定研究一下相关的应用技术对心跳处理进行补充。