如何通过系统内置的数据表实现在线聊天室

思路

按照官方给出的数据表来实现，只需要官方的私信数据表

按照逻辑 都是通过插入数据表 如何根据发送给谁来查询是否有私信

体验

可以去青航主题 注册体验该功能

数据表结构

CREATE TABLE `yzm_message` (
  `messageid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `send_from` varchar(30) NOT NULL DEFAULT '' COMMENT '发件人',
  `send_to` varchar(30) NOT NULL DEFAULT '' COMMENT '收件人',
  `message_time` int(10) unsigned NOT NULL DEFAULT '0',
  `subject` char(80) NOT NULL DEFAULT '' COMMENT '主题',
  `content` text NOT NULL,
  `replyid` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '回复的id',
  `status` tinyint(1) unsigned DEFAULT '1' COMMENT '1正常0隐藏',
  `isread` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否读过',
  `issystem` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '系统信息',
  PRIMARY KEY (`messageid`),
  KEY `replyid` (`replyid`),
  KEY `status` (`status`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8

实现效果

技术栈

前端 vue3+php

逻辑方法

构造一个方法list 主要用于输出私信列表 为防止单个用户信息重复 我们可以通过删除相同发送者的key值

比如发送者字段send_from  删除相关值的数组 我们就会等到一个唯一一个发送者的私信 这样就不会重复

函数分享：

function assoc_uniques($arr, $key)
{
	$tmp_arr = array();
	foreach($arr as $k => $v) {
		if(in_array($v[$key], $tmp_arr)) {
			unset($arr[$k]);
		} else {
			$tmp_arr[] = $v[$key];
		}
	}
    return $arr;
}

$arr 为数组 key 为要删除的重复字段 删除并重新排序

好 ，我们在方法中 通过db操作类 循环出 数据表中的数据 比如说这样的写法

D('message')->where(['send_to' =>get_cookie('_username')])->select();

查询条件是接受者自己的用户名 这样你就得到一个别人发给你你自己的私信

通过遍历循环出 发送者的用户头像 等其他 再转化出时间戳的格式 

然后通过 return_json输出数据

return_json(['status' => 200,'data'=>assoc_uniques($data,'send_from')]);

前端通过请求接受数据

axios.post('/member/msg/init').then(res => {
   if(res.data.status == 200){
	this.list = res.data.data.data
	this.isload = true
     }else{
	layer.msg('请求出错',{icon: 2})  
     }
})

请求成功后v-for 渲染数据到html中

然后我们就等到这样的页面

好 ，我们再写一个show的方法 主要查看该私信的内容

我们需要在show方法中提交userid 该用户id为发送者的ID

通过vue声明周期函数请求 该用户ID 通过该用户ID获取 发送者用户名

如果你觉得麻烦 可以直接获取提交用户名的值 这样就不用通过查ID转化用户名

请求实例：

axios.post('/member/msg/show',{userid:this.userid}).then(res => {
    if(res.data.status == 200){
	this.list = res.data.data.data
	this.isload = true
    }else{
     layer.msg('请求出错',{icon: 2})  
    }
})

后端通过请求 再输出相关数据

通过

select();

方法输出遍历 

查询条件使用or的表达式查询 send_from send_to 两个字段的值 查询自己的用户名 get_cookie('_username')

在遍历插入一条数组为

$item['type'] = $item['send_from'] == get_cookie('_username') ? 'from':'to';

通过判断 判断出 类型 作为前端渲染中区分的类型 发送者是from 接收者是to 输出数组类型

然后得到一组 数据 然后渲染在html页面上 

我们在设计一个html：

<li :class="item.type == 'from' ? 'msg-self' : 'msg-to'" v-for="item in list">
  <div class="my-msg-list" v-if="item.type == 'from'">
    <img :src="item.userpic" class="avatar radius4">
    <div class="my-msg-info">
      <div class="msg-meta">
        <span>{{ item.send_from }}</span>
        <span>
          <time>{{ item.message_time }}</time></span>
      </div>
      <div class="my-msg-content">
        <p style="margin: 0;">{{ item.content }}</p></div>
    </div>
  </div>
  <div class="my-msg-list" v-else>
    <div class="my-msg-info">
      <div class="msg-meta">
        <span>
          <time>{{ item.message_time }}</time></span>
        <span>{{ item.send_from }}</span></div>
      <div class="my-msg-content">
        <p style="margin: 0;">{{ item.content }}</p></div>
    </div>
    <img :src="item.userpic" class="avatar radius4"></div>
</li>

通过判断 type方法来作为区分对方发送的信息 作为格式整理 如图在html代码之中 我已经做出了样式类型的区分

请求成功后我们就会得到这样的格式

然后我们在设计一个发送框

<textarea rows="4" v-model="content" placeholder="" class="msg-textarea form-control"></textarea>

发送者send_to 为刚刚上面获取的用户名 相当于重新把消息发给了他

后台写一个发送私信的方法 官方有实例 不多讲 通过axios 发送给方法

内容发布成功后回调一个声明周期函数定义的方法 实现了数据的刷新 就得到一个完整的信息交互了

最后

请按照自己的基础来实现该功能哟 不能盲目尝试 逻辑看不懂句说明无法实现

感谢大家