最近公司内部聊天公办服务器挂了,但不能断了与几位好友的联系,于是写了一个简单得不能再简单的留言板(不能与其他的相比),用来吹壳子~
CI是一个PHP MVC框架,JQuery是一个JS库,用AJAX实现发送与显示。
Model: chat_model.php
view: index.php
view: more.php
view: show.php
SQL: chat.sql
注:其中有一问题,若一条message内容过多,或者显示太多的message,div会显示一个滚动条,但是滚动条不能自动到底。
CI是一个PHP MVC框架,JQuery是一个JS库,用AJAX实现发送与显示。
直接上代码:
Controller: chat.php
- class Chat extends CI_Controller {//CI中类名首字母大写
- function __construct() {
- parent::__construct();
- $this->load->model('chat_model');//加载chat_model
- $ip_list = array('172.18.59.251', '172.18.58.238', '172.18.58.248', '172.18.58.243');
- $ip = $this->input->ip_address();
- if (!in_array($ip, $ip_list)) show_404();//简单的过滤了几个IP
- }
- //home page
- function index() {
- $this->load->helper(array('url', 'form'));
- $this->load->view('index/index');
- }
- //send message
- function send() {
- $data = $this->input->post();
- if (empty($data)) return false;
- if ($this->chat_model->save($data) == false) {//保存
- echo '0';
- }
- }
- //show the last N message
- function show() {
- $data = $this->chat_model->getSome(5);//获取N条消息
- $data = array_reverse($data);//反转数组
- $chat['content'] = $data;
- $string = $this->load->view('index/show', $chat, TRUE);//视图放入string变量中
- echo $string;//返回给ajax请求
- }
- //show all message
- function more() {
- $data = $this->chat_model->getAll();
- $chat['content'] = $data;
- $this->load->view('index/more', $chat);
- }
- }
- class Chat_model extends CI_Model {
- function __construct() {
- parent::__construct();
- $this->load->database();
- }
- //save message
- function save($data) {
- $data['ip'] = $this->input->ip_address();
- $data['send_date'] = date('Y-m-d H:i:s');
- if ($this->db->insert('tb_chat', $data) == false) {
- return false;
- }
- return true;
- }
- //get N message
- function getSome($limit) {
- if ($limit == 0) return false;
- $this->db->select('username, content, send_date');
- $this->db->from('tb_chat');
- $this->db->order_by('send_date', 'DESC');
- $this->db->limit($limit);
- $query = $this->db->get();
- return $query->result_array();
- }
- //get all message
- function getAll() {
- $query = $this->db->get('tb_chat');
- return $query->result_array();
- }
- }
- <!DOCTYPE html>
- <html>
- <head>
- <title>chat room</title>
- <meta charset="utf-8">
- <script src="common/js/jquery.min.js"></script>
- <style>
- body {
- padding:0px 50px;
- }
- #content {
- border: 1px solid #ccc;
- height: 400px;
- overflow: auto;
- }
- #form {
- border: 1px solid #ccc;
- }
- </style>
- </head>
- <body οnlοad="get();">
- <div id="content">
- </div>
- <hr>
- <div id="form">
- <form id="chat_form">
- <table>
- <tr>
- <td>
- 我是:<input type="text" id="username" name="username">
- </td>
- <td>
- 发言:
- <textarea id="textarea" rows="5" cols="50"></textarea>
- </td>
- <td><input id="sendBtn" type="button" value="发送" οnclick="send();"></td>
- </tr>
- </table>
- </form>
- <hr>
- <?php echo anchor('index/more', '查看全部聊天记录'); ?>
- </div>
- </body>
- <script>
- function check() {
- var textareaValue = document.getElementById('textarea').value;
- if (textareaValue == '') {
- alert('啥都没有,就不用发送啦~');
- return false;
- }
- return true;
- }
- function send() {
- if (check() == false) return false;
- var username = $('#username').val();
- var content = $('#textarea').val();
- var url = 'index.php/index/send';
- if ($('#sendBtn').val() == '发送中...') return false;
- $('#sendBtn').val('发送中...');
- $.post(url, {'username':username,'content':content},function(result){
- if (result == 0)
- alert('send false');
- else
- $('textarea').val('');
- $('#sendBtn').val('发送');
- });
- }
- $(document).ready(function(){
- var timer = setInterval('get()', 5000);//5秒自动获取一次最新消息
- });
- function get() {
- var url = 'index.php/index/show';
- $.post(url,function(result){
- $('#content').replaceWith(result);
- })
- }
- </script>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>All message</title>
- </head>
- <body style="padding: 0px 50px;">
- <div style="border: 1px solid #ccc;">
- <?php foreach($content as $item): ?>
- <p>
- <?php echo $item['username']; ?> [<?php echo $item['send_date']; ?>]:<br>
- <?php echo $item['content']; ?>
- </p>
- <hr>
- <?php endforeach; ?>
- <p style="text-align: right; padding-right: 100px;"><a href="<?php echo $base_url; ?>">Return</a></p>
- </div>
- </body>
- </html>
- <div id="content">
- <?php foreach($content as $item): ?>
- <p>
- <?php echo $item['username']; ?> [<?php echo $item['send_date']; ?>]: <?php echo $item['content']; ?>
- </p>
- <hr>
- <?php endforeach; ?>
- </div>
- --
- -- 表的结构 `tb_chat`
- --
- CREATE TABLE IF NOT EXISTS `tb_chat` (
- `id` int(11) NOT NULL AUTO_INCREMENT,
- `username` varchar(32) NOT NULL,
- `content` text NOT NULL,
- `send_date` datetime NOT NULL,
- `ip` varchar(32) NOT NULL,
- PRIMARY KEY (`id`)
- ) ENGINE=InnoDB DEFAULT CHARSET=utf8 ;
注:其中有一问题,若一条message内容过多,或者显示太多的message,div会显示一个滚动条,但是滚动条不能自动到底。