记录手撸简易在线聊天室感想、整体结构、遇到的问题及解决方法

前言及感想:

前几天突发奇想,想撸一个在线的聊天室简版。本想以过往的想法,大概只需要一天就能完成这个只有聊天界面的聊天室(本想盗个模版。改改数据和接口,就是我的传统做法,那句话怎样说?哇,大神好棒棒qwq,下一秒就是我的了(笑)),甚至没有任何css装饰。然而我太天真了orz,后面接触过后,本来还是可以直接用别的,但是这次我选择自己手撸,总的来说还是学到不少。

因为不是信科院的= =根本没有系统学过任何编程语言,唯一比较熟悉编程语言大概写过c++和python。最开始是学习C++随便糊了语法,反正够用就行,事实好像也够用的感觉。

不过说起这个倒有些感想,因为最初是学单片机ardunino,用的c++但是,但是都是非常简单的代码,或者说只要一搜就是一大堆一样的代码。学单片机唯一写过比较长的代码大概是写一个跳舞机器人的代码,编写其动作的代码,总体还是比较简单。那问题就是,意思是,只要我用一个文件,或者页面就能写完了。那时甚至不知道怎样架构框架。反正一直的做法是新建一个项目,不断从上往下写,需要的时候就往中间嵌入代码。

其实我早就注意这个问题,虽然不知道怎样运行速度有没有影响,但是在阅读性和修改更新就存在着非常大的问题。也许这也是最大的问题,而最大的问题是这种写法甚至影响我写其他语言的风格,甚至观看别人写的代码都造成很大影响,特别在阅读方面,简单说,我甚至看不懂别人写代码。这是非常大阻碍。这体现在我在用python写一个聊天室bot脚本体现了,首先大神先给了他的源码(GitHub上的地址),我看了超级多遍,可是,我还是看不懂(为自己的无知而羞愧),后面他又给了一个思路我,就是不要局限用浏览器访问网站,这给了我非常大的启发。所以非常感谢大神的指点(虽然忘记了大佬的名字qwq)。后面没多久 就撸了一个简易版的bot.基本满足聊天,点歌,自动欢迎的功能,但还是那个问题,我还是用写c++的风格来写的orz,所以我的代码根本不能让别人看到,我总怕别人忍不住打我_(:зゝ∠)_因为写得跟shit一样。后面实在连自己都受不了,花了点时间重新架构了整体框架,实在重新架构过框架后,阅读性就上去,而且在添加功能的方便了很多。

而写这次写简易聊天室(虽然还存在很多问题,至少基本满足功能,至少也算是完成了),也发现了一个很重要的问题:各种语言的自身的优越性。还是写c++的影响。就是一直以为学了一种语言,就以为学会了其他语言(其实在写简易聊天室之前,我只用过PHP写过“hello world”_(:зゝ∠)_)。反正最开始写的时候是以为都差不多,用着写python思维去写PHP。(特别提醒:马丹,新手不要先去学python,不然你会被python宠坏,其他都不会写了orz),在语法上就有很多问题。很多方法都行不通,这样让我不得不重新去看PHP的问题和视频。然后我再用PHP的思维去写去写,就发现了容易多了。

总结一下就是,写代码的风格不要局限一种,而且最好以框架的模式开发,还有用某种语言写,就应该先熟悉某种语言的优越的地方,运用好,这大概比较好。还有这次可能是第一次真正的写后端代码。其中涉及的东西很多,全部列出来大概是:前端html+装饰css+后端php+数据库mysql+jq/js。真正的“麻雀虽小,五脏俱全”。
虽然是非常小的项目,但是还是非常有意思的,特别对于我这样的新手。

 

整体框架:

最简单的两个页面:登录界面、主体界面
主体界面三部分:send、message、userlist、发送信息部分,显示消息,用户列表。

说着简单,但是在写的时候,大概脑子有坑,加上被误导,实际上php加载html再加载php加载html。不过这样写的也有好处的,比如可以加了类似于会员的限制,让别人不能直接通过html的地址访问到里面的东西,必须先登录和输入密码才可以进入。还有就是实现动态实时更新信息和防止别人看到一些js/jq代码了。虽然只是简单的,只能说防君子不防大佬吧,只是不想一些人不认识的人进去而已。也有不好的地方,需要浪费更多的资源?而且加载需要更多的定时器之类的。

 

遇到的问题:

我发现我最大的问题就是不理解它运行的逻辑。举个很奇葩的栗子,就是我们的习惯思维觉得,从自己浏览器发的信息,服务器肯定知道是自己发的呀,事实上,无论你从哪个浏览器发出,服务器其实是不知道谁发的,所以你要先‘告诉’它。怎么理解呢,就是就连最简单的回车发送也要重写函数。服务器很蠢der,就像现在的考试,改卷的老师,你需要写得非常清楚,它才能执行。所以要理清其中逻辑,很多时候就是理不清其中的逻辑orz
最重要的是发现问题,在网上也找到了解决的代码。就是不说明怎样用和其中的逻辑先手关系。大概我也比较蠢

 

问题一:如果在html插入php代码。

事实上,html是不能插入php代码的,而且即使放在在开头。或者中间都不行的。

<!DOCTYPE html> 
<html lang="ch-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>Hello World</title>
</head>
<body>
<?php
     echo "Hello world!这是正文";
 ?>
</body>
</html>

其他的方法我试了,好像也不太理想,我这里的做法是先写一个php文件和html文件,再去用php加载html.这样就在html就能直接调用php的函数或者直接嵌入php代码。

eg.php

<?php

include 'eg.html';
?>

eg.html

<!DOCTYPE html>
<html lang="ch-cn">
<head>
</head>
<body>
 <?php
     echo "Hello world!这是正文";
     ?>
</body>
</html>

 

问题:页面的局部刷新,实现在线实时更新。

这个我尝试多挺多方法,虽然最常用的使用ajax异步处理。但是其中逻辑关系没有想好,实现不了。虽然有很多例子,但是一开始我就是搞不清其中的逻辑关系。所以我尝试局部刷新<div>和<iframe>其中div好像刷新不了,然后<iframe>可以刷新,但是会让整个页面也刷新一遍。这不是我想要的结果,最终我还是用回了ajax异步来实现局部刷新。

具体方法,先建立两个文件。get.php和show.html

get.php

<?php
session_start();
// 存储 session 数据
$dbhost = 'localhost';  // mysql服务器主机地址
$dbuser = 'root';            // mysql用户名
$dbpass = 'password';          // mysql用户名密码
$conn = mysqli_connect($dbhost, $dbuser, $dbpass);
// 设置编码,防止中文乱码
mysqli_query($conn , "set names utf8");

//选择哪个键名:msg。那张表:chat
$sql = 'SELECT msg
        FROM chat ';
//选择哪个数据库:egsql
mysqli_select_db( $conn, 'egsql' );//执行sql
$retval = mysqli_query( $conn, $sql );
while($row = mysqli_fetch_assoc($retval))
{
     $results[] = $row;
}
$jsonResult =  json_encode($results);//转化为json格式
mysqli_close($conn);//关闭数据
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])){//判段是不是ajax请求,如果是只需要返回数据,如果不是,即第一次加载,完全加载show.html
        print_r($jsonResult);
        }else{
include ('show.html');
}


?>

show.html

<!DOCTYPE html>
<html lang="en">
<head>
</style>
</head>
<body>
<div id="show">
<?php
$strmsg = json_decode($jsonResult, true);
foreach ($strmsg as $strmsg) {
    echo $strmsg['msg'].':'.$strmsg['msg'].'<br>';
}

?>
</div>
//jq库
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="JavaScript">
var tom = function tom(){
    $.ajax({
        type:"get",
        url:'get.php',
        dataType:'json',
        success:function(msg){
            var attr='';
            if (msg != null){
                for(var i= 0;i<msg.length;i++){
                         attr+= msg[i].msg[i].msg+'<br>';
                           }
                  $('#show').html(attr);
                   }
              }
    });
    }
setInterval(tom,1000);
</script>

</body>
</html>

总结:其逻辑关系就是:get.html通过定时器,通过get向msg.php发送请求。msg.php接受到请求,返回数据。然后get.html通过jq将返回的数据进行解析,并打印,更新到<div>上,实现实时局部刷新。

这其中还有个小问题。关于定时器,如果直接写成

setInterval(aletrt('1'),1000);

是不会执行的,或者说在页面更新的时候会马上执行一次,之后不执行。具体忘记了,好像说返回是空值,会出错,所以最好要写成函数形式。

 

问题:关于如何防止别人直接访问html地址。而直接访问到聊天室的内容呢?

因为完全不懂,而且思维也被局限了,我一直在想如何让浏览器不显示html的地址,所以我的想法是如果隐藏html或者对html加密,事实在方向就是错了。浪费了几个小时呢= =,所以我发现我真的蠢。直接说方法,还是问题的方法,其实只要用php加载html,然后利用php的接受登录页面的发过的数据继续判定就可以了.具体看下面的例子:

login.html

<!DOCTYPE html>
<html lang="ch-cn">
<head>
</head>
<body>
 <div id="a">
<form action="" method="post" autocomplete="on">
USERNAME: <input required="" type="text" name="fname"/><br/>
PASSWORD: <input required="" type="password" name="password"/>
<input id ="enter" type="submit"value="ENTER"/>
</form>
  </div>
</body>
</html>

login.php

<?php
session_start();
// 存储 session 数据

if(!empty($_POST)){
        if ($_POST['password']!= 'password'){
             echo "<script>alert('密码错误!');window.location.href='login.php';</script>";
             exit.//这个很重要,要是没有这个,即使密码错了依旧会跳转
        }
        $_SESSION['uname']=$_POST['fname'];//这个也非常重要,用来判定用户是从登录还是跳过登录来的,如果没有通过密码,就不会保存session
        echo "<script>alert('登录成功,正在跳转!');window.location.href='show.php';</script>";

}
include 'login.html';
?>

show.php

<?php
session_start();
// 存储 session 数据

if(!empty($_SESSION['uname'])){
	include 'show.html';
}else{
  echo "<script>alert('请先登录!');window.location.href='login.php';</script>";
}
	
?>

show.html

<!DOCTYPE html>
<html lang="ch-cn">
<head>
</head>
<body>
 <?php
     echo "Hello world!这是正文";
     ?>
</body>
</html>

问题:加入css自动适应屏幕

剩下这些问题先不打算弄,因为学校有事得要忙。


简易在线聊天室传送门:dchat

 
————————————————————————

加入讨论

电子邮件地址不会被公开。 必填项已用*标注