----20220616
在第一天的更文中，我们将登录这一块的内容向大家进行了一个较为详细的讲解，那么几天就接着上次的讲解，继续我们今天的内容，那也就是聊天页面。\
页面展示
开始时，在这边进行一个登录，登陆原理以及前端代码，大家可以看看昨天的文章 j2ee建立在线聊天室详细教程（第一天登陆页面） - 掘金 (juejin.cn)，我这边将我的网名输入，点击登录按钮，页面跳转到聊天页面
我们可以看到，聊天页面有以下功能，首先展示我们聊天室的名字，然后这边可以进行一个提示，显示新用户的登录时间与名称，最右边显示的是当前用户在线的人数，以及用户的名称
今天我想聊聊消息发送这一块的内容
这边加入了一个新角色，然后输入消息，进行发送
当输入信息为空白时，这边系统进行提醒
实现代码
<script type="text/javascript">
var content;
function send(){
var con = document.getElementById("content");
var content = con.value;
content = content.replace(/\n/g,"<br> ").replace(/\s/g," ");
content = encodeURIComponent(content);
if(content.length==0){
alert("内容不能空！");
con.focus();
}else{
ajax({
url: "sendMassage.do",
data: "content="+content,
Success: function(msg){
eval("result="+msg);
con.value="";
}
});
}
}
function sendbykey(event){
var event=window.event||event;
if(event.ctrlKey&&event.keyCode==13){
send();
}else if(event.keyCode==13){
}
}
代码讲解
那么这边对于代码部分呢，进行一个讲解
首先，我们对于需要发送的消息呢，需要进行一个变量的定义，定义内容变量，var contect。之后呢，我们需要发送一个发送异步请求，也就是内容发送的函数
我们定义function send()，首先定义con，通过getElementById(“content”)，var content = con.value;语句，获得我们输入的内容。
这边还有一个重要的内容，
content = content.replace(/\n/g,"<br> ").replace(/\s/g," ");
将内容中的回车和空白转为两个网页空格,之后通过content = encodeURIComponent(content);语句，将content字符串作为 URI 组件进行编码。
当我们输入消息时，有一个很重要的内容是什么，就是判断它是否为空，这边我们可以简单的使用if else语句，对其进行一个判断，当我们输入长度为0，我们这边通过alert，输入“内容不能为空”。\
alert
alert是HTML DOM 中用到的一种脚本语言它的中文意思是“提醒”。它是JavaScript或VBscript脚本语言中窗口window对象的一个常用方法；其主要用法就是在你自己定义了一定的函数以后，通过执行相应的操作，所弹出对话框的语言。并且alert对话框通常用于一些对用户的提示信息。常见的为alert函数。
内容为空时，重回焦点
焦点是什么呢？
焦点
jquery 获得焦点的时候，焦点时文本框清空
如果内容不为空，则异步提交，依旧使用ajax
url：为sendMassage.do //消息处理控制器，明天给大家介绍
这边成功输出信息时，会通过函数 function(msg)，以及eval(“result=”+msg)语句，那响应结果，封装为键值，之后通过con.value=""语句，将之前输入框的内容，设为“ ”，也就是清空已经提交的数据，为下一次的输入，制造条件，不用手动对于之前信息进行一个删除。
今天的内容结束，聊天室真的是越写越有意思，明天继续！