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. NameNode是如何存储元数据的？

    1.NN的作用 保存HDFS上所有文件的元数据! 接受客户端的请求! 接受DN上报的信息,给DN分配任务(维护副本数)! 2.元数据的存储 元数据存储在fsiamge文件+edits文件中! fsim ...

  2. day51 表格与表单

    目录 一.表格标签 二.表单标签 1 form内最重要的就是input标签,它通过type变形 2 select标签 3 textarea标签 4 重点 三.通过flask实现表单提交 四.css 1 ...

  3. NEST教程系列：推断索引名

    NEST教程系列:三种推断索引名写法 目录 NEST教程系列:三种推断索引名写法 连接时设置默认索引 设置 .NET 类映射索引名 在创建请求的时候直接显式指定索引名 总结 连接时设置默认索引 构建 ...

  4. （六）pandas 日常使用技巧

    pandas数据处理 1.删除重复元素 import numpy as np import pandas as pd from pandas import Series,DataFrame df = ...

  5. Flask 基础组件（四）：模板

    1.模板的使用 1.1  语法 1.1.1 流程控制 逻辑语法 Jinja2模板语言中的 for {% for foo in g %} {% endfor %} Jinja2模板语言中的 if {% ...

  6. JS中this指向的更改

    JS中this指向的更改 JavaScript 中 this 的指向问题 前面已经总结过,但在实际开中, 很多场景都需要改变 this 的指向. 现在我们讨论更改 this 指向的问题. call更改 ...

  7. SpringMVC中@RequestBody接收前端传来的多个参数

    在使用ajax发送请求时,如果发送的JSON数据是一个类中的不同属性,在Controller方法中使用@RequestBody会直接封装进该类中 例如: 前端部分代码 JavaScript <s ...

  8. UML学习笔记—基本概念和初始阶段

    chpater1 1.什么是分析和设计 分析:对问题和需求的调查研究 设计:满足需求的概念上的解决方案 做正确的事(分析)和正确地做事(设计) 2.什么是Object-Oriented-Analysi ...

  9. 采用 Unicode 标点属性方式的正则表达式，可以去掉所有的标点符号，

    public class Test { public static void main(String[] args) { String str = "!!!??!!!!%*)%￥!KTV去符 ...

  10. Ethical Hacking - NETWORK PENETRATION TESTING(3)

    Change MAC Address using macchanger.  Packet Sniffing Basics Airodump-ng airodump-ng is a program pa ...