php聊天室

前端页面

chat_room.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../ico/index.ico" />
    <title>聊天室</title>
    <style>
        div {
            width: 32rem;
            yellowgreen;
        }
    </style>
</head>
<body>
    <script>
        document.write(new Date());
    </script>
    <div id="con">
    </div>
    <form action="" method="">
        <input type="text" name="uname" id="uname" size="10">
        <input type="text" size="40" id="content">
        <input type="button" value="发送" id="btn" onclick="demo02()">
    </form>
    <script>
        function createXmlHttpRequest() {
            var request = false;
            request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
            if (request == false) {
                request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
            } else if (request == false) {
                request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
            } else if (request == false) {
                //alert("创建request失败！");
            } else {
                //alert("创建成功！")
            }
        }
        function demo02() {
            var request = false;
            request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
            if (request == false) {
                request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
            } else if (request == false) {
                request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
            } else if (request == false) {
                //alert("创建request失败！");
            } else {
                //alert("创建成功！")
            }
            var unameobj = document.getElementById("uname");
            var uname = unameobj.value;
            var contentobj = document.getElementById("content");
            var content = contentobj.value
            contentobj.value = '';
            var mess = "username=" + uname + "&" + "content=" + content;
            // alert(mess);
            request.open("POST", "php/write.php", true);
            request.setRequestHeader("Content-type", 'application/x-www-form-urlencoded');
            request.send(mess);
        }
        function getMass() {
            var request = false;
            request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
            if (request == false) {
                request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
            } else if (request == false) {
                request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
            } else if (request == false) {
                //alert("创建request失败！");
            } else {
                //alert("创建成功！")
            }
            createXmlHttpRequest();
            setInterval(function () {
                request.open("GET", "php/read.php", true);
                request.send(null);
                request.onreadystatechange = function () {
                    if (request.readyState == 4 && request.status == 200) {
                        //alert("服务器响应数据：" + this.responseText);
                        document.getElementById("con").innerHTML = this.responseText;
                    }
                }
            }, 2000);
        }
        getMass();
    </script>
</body>
</html>

php后端页面

conn.php:连接数据库

<?php
header("Content-Type:text/html;charset=utf8");
$mysql_server_name = "localhost:3306"; //连接数据库端口
$mysql_username = "root"; //用户名
$mysql_password = "123456"; //密码
$mysql_database = "test"; //数据库名称  
$conn = new Mysqli($mysql_server_name, $mysql_username, $mysql_password, $mysql_database); //构造函数mysql
// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
    }
    echo "连接成功";
 

write.php:写入数据库消息

<?php
include_once 'conn.php';
$username = $_POST["username"];
$content = $_POST["content"];
// $username = "username";
// $content = "content";
$time = date("Y/m/d H:i:s");
if ($content == null) {
    echo "<script>alert('内容不能为空！')</script>";
} else {
    # code...
    $sql = "INSERT INTO message(time,username,message) VALUES('$time','$username','$content')";
    $conn->query($sql);
}

read.php :读取数据库中存入的消息

<?php
include_once 'conn.php';
$sql = "SELECT time,username,message FROM message";
$array = $conn->query($sql);
$data = mysqli_fetch_all($array, MYSQLI_NUM);
echo '<br/>';
// print_r($data);
   // echo file_get_contents("message.txt");
//echo $data[]
$count = count($data);
for ($i=0; $i <$count ; $i++) { 
   $temp =$data[$i];
   for ($j=0; $j < 3; $j++) { 
      # code...
      echo $temp[$j];
      echo '------';
   }
   echo '<br/>';
}
 

Php7+Mysql8实现简单的网页聊天室功能的更多相关文章

  1. Java和WebSocket开发网页聊天室

    小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...

  2. JavaWeb网页聊天室（WebSocket即时通讯）

    原文:http://baike.xsoftlab.net/view/656.html Git地址 http://git.oschina.net/loopcc/WebSocketChat 概要: Web ...

  3. 基于flask的网页聊天室（三）

    基于flask的网页聊天室(三) 前言 继续上一次的内容,今天完成了csrf防御的添加,用户头像的存储以及用户的登录状态 具体内容 首先是添加csrf的防御,为整个app添加防御: from flas ...

  4. 基于flask的网页聊天室（二）

    基于flask的网页聊天室(二) 前言 接上一次的内容继续完善,今天完成的内容不是很多,只是简单的用户注册登录,内容具体如下 具体内容 这次要加入与数据哭交互的操作,所以首先要建立相关表结构,这里使用 ...

  5. 基于flask的网页聊天室（一）

    基于flask的网页聊天室(一) 基本目标 基于flask实现的web聊天室,具有基本的登录注册,多人发送消息,接受消息 扩展目标 除基本目标外添加当前在线人数,消息回复,markdown支持,历史消 ...

  6. WebSocket 网页聊天室的实现（服务器端：.net + windows服务，前端：Html5）

    websocket是HTML5中的比较有特色一块,它使得以往在客户端软件中常用的socket在web程序中也能轻松的使用,较大的提高了效率.废话不多说,直接进入题. 网页聊天室包括2个部分,后端服务器 ...

  7. 使用Servlet和JSP实现一个简单的Web聊天室系统

    1 问题描述                                                利用Java EE相关技术实现一个简单的Web聊天室系统,具体要求如下. (1)编写一个登录 ...

  8. 基于Server-Sent Event的简单聊天室　Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  9. Netty学习笔记(四) 简单的聊天室功能之服务端开发

    前面三个章节,我们使用了Netty实现了DISCARD丢弃服务和回复以及自定义编码解码,这篇博客,我们要用Netty实现简单的聊天室功能. Ps: 突然想起来大学里面有个课程实训,给予UDP还是TCP ...

随机推荐

  1. UVA11300 Spreading the Wealth 题解

    题目 A Communist regime is trying to redistribute wealth in a village. They have have decided to sit e ...

  2. day32 异常处理、网络编程

    目录 一.异常处理 1 什么是异常 2 为什么要处理异常 3 如何处理异常 3.1 语法错误 3.2 逻辑错误 3.3 两种处理逻辑异常的方式 3.3.1 可预知型错误 3.3.2 不可预知型错误 4 ...

  3. 【Nginx】实现负载均衡、限流、缓存、黑白名单和灰度发布，这是最全的一篇了！

    写在前面 在<[高并发]面试官问我如何使用Nginx实现限流,我如此回答轻松拿到了Offer!>一文中,我们主要介绍了如何使用Nginx进行限流,以避免系统被大流量压垮.除此之外,Ngin ...

  4. 数据可视化实例（三）： 散点图（pandas，matplotlib，numpy）

    关联 (Correlation) 关联图表用于可视化2个或更多变量之间的关系. 也就是说,一个变量如何相对于另一个变化. 散点图(Scatter plot) 散点图是用于研究两个变量之间关系的经典的和 ...

  5. 数据分析01 /numpy模块

    数据分析01 /数据分析之numpy模块 目录 数据分析01 /数据分析之numpy模块 1. numpy简介 2. numpy的创建 3. numpy的方法 4. numpy的常用属性 5. num ...

  6. 初识：LevelDB

    初识:LevelDB 上篇文章缘起:BigTable可以说是已经把论文Bigtable: A Distributed Storage System for Structured Data中的内容掰扯的 ...

  7. 记一次webpack打包的问题

    记一次webpack打包的问题 在webpack打包中开启了webpack-bundle-analyzer,发现了一个chunk:tinymce  在整个项目中查找,只有一个未被使用的组件中有如下代 ...

  8. JAVA面向对象：三大特征 封装讲解

    一.JAVA封装 1.封装的理解 封装是 JAVA 面向对象思想的 一 种特性,也是一种信息隐蔽的技术 2.封装的原则 将类中的某些信息隐藏起来,来防止外部程序直接访问,通过类中的方法实现对隐藏的信息 ...

  9. vue : 在vuex里写一个数组首尾元素互换的方法

    不着急上代码,先想几个问题. vuex里怎么写方法? mutation里写vuex方法,组件中用commit调用. 数组首尾元素怎么互换? arr.splice(0, 0, arr[arr.lengt ...

  10. Shell基本语法---case语句

    case语句 格式 case 变量 in 值1 ) 执行动作1 ;; 值2 ) 执行动作2 ;; 值3 ) 执行动作3 ;; .... * ) 如果变量的值都不是以上的值,则执行此程序 ;; esac ...