j2ee建立在线聊天室详细教程(第二天发送消息)

903 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第十二天,点击查看活动详情

----20220616
在第一天的更文中,我们将登录这一块的内容向大家进行了一个较为详细的讲解,那么几天就接着上次的讲解,继续我们今天的内容,那也就是聊天页面。\

页面展示

开始时,在这边进行一个登录,登陆原理以及前端代码,大家可以看看昨天的文章 j2ee建立在线聊天室详细教程(第一天登陆页面) - 掘金 (juejin.cn),我这边将我的网名输入,点击登录按钮,页面跳转到聊天页面
image.png

我们可以看到,聊天页面有以下功能,首先展示我们聊天室的名字,然后这边可以进行一个提示,显示新用户的登录时间与名称,最右边显示的是当前用户在线的人数,以及用户的名称 image.png 今天我想聊聊消息发送这一块的内容
这边加入了一个新角色,然后输入消息,进行发送 image.png
当输入信息为空白时,这边系统进行提醒

image.png


实现代码

<script type="text/javascript">

	var content;
	function send(){
		var con = document.getElementById("content");
		var	content = con.value;
                content = content.replace(/\n/g,"<br>&nbsp;&nbsp;").replace(/\s/g,"&nbsp;&nbsp;");
		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>&nbsp;&nbsp;").replace(/\s/g,"&nbsp;&nbsp;"); 将内容中的回车和空白转为两个网页空格,之后通过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=""语句,将之前输入框的内容,设为“ ”,也就是清空已经提交的数据,为下一次的输入,制造条件,不用手动对于之前信息进行一个删除。


今天的内容结束,聊天室真的是越写越有意思,明天继续!