文档章节

jsp+servlet实现简单的直播室

西米火山
 西米火山
发布于 2016/12/12 21:48
字数 874
阅读 17
收藏 0
点赞 0
评论 0

#1.页面组成

  1. 一个后台页面 manage.jsp
  2. 一个前台展示页面 index.jsp
  3. 一个用于处理的LivingRoom(Servlet)
  4. 由于我们的后台管理页面和展现页面都需要一个展示信息的框,所以,我们采用了动态include,所以还需要一个content.jsp
//manage.jsp
<table>
		<tr style="height: 10%">
			<th colspan="2">NBA直播室后台</th>
		</tr>
		<tr style="height: 83%">
			<td colspan="2"><jsp:include page="content.jsp" flush="true"></jsp:include></td>
		</tr>
		<tr style="height: 7%">
			<td style="85%"><input type="text" name="content" class="content" id="content"></td>
			<td><input type="button" value="发表" class="btn"></td>
		</tr>
</table>
//content.jsp
  <body>
    <textarea id="showMsg" style="width:100%;height:100%;resize:none;font-size:16px;readonly:true" ></textarea>
  </body>
//index.jsp
<table>
		<tr style="height: 10%">
			<th colspan="2">NBA直播室</th>
		</tr>
		<tr style="height: 90%">
			<td colspan="2"><jsp:include page="manage/content.jsp" flush="true"></jsp:include></td>
		</tr>
</table>

2.具体的实现(采用ajax+java+jquery)

  1. 当我们点击发送按钮的时候,我们希望请求servlet,将我们的输入框中的内容传到后台,后台将数据写进一个文件中,(在数据)
$(function(){	
	  		$(".btn").click(function(){
		  		var content = $(".content").val();
	  	  		if(validate()){
	  	  	  		$.ajax({
		  	  	  		method:"post",
	  	  	  			url:"LivingRoom",
	  	  	  			//data包括内容,以及一个标记,因为我们还有一个是要展示,同样请求同一个url,加入r是为了避免网页缓存
	  	  	  			data:"content="+content+"&flag=send"+"&r="+new Date(),
	  	  	  			dataType:"json",
	  	  	  			success:function(data){
	  	  	  				//接收后台返回的值	
	  	  	  				if(data ==  1){
	  	  	  					//清除输入框中的内容并获得焦点
		  	  	  				$(".content").val("").focus();
		  	  	  			}
	  	  	  			},
	  	  	  			error:function(){
		  	  	  			alert("数据提交错误,请稍后再试!");
		  	  	  		}
		  	  	  	});
	  	  	  	}
	  	  	});
	  	});
  		//验证函数
	  	function validate(){
	  	  	var reg = "/^\s+|\s+$/g";
	  	  	var content = document.getElementById("content").value;
	  	  	if(content.replace("reg","").length<1){
	  	  	  	alert("需要输入内容后,才能发表!");
	  	  	  	return false;
	  	  	}
	  	  	return true;
	  	}
  1. 在servlet中,我们根据flag来判断,我们具体应该做的操作,有可能是写入,有可能是展示
String flag = request.getParameter("flag");
		//获取存储文件的根路径
		String path = request.getSession().getServletContext().getRealPath("record");
		SimpleDateFormat sdf = new SimpleDateFormat("YYYY-MM-dd");
		String fileName = sdf.format(new Date())+".dat";
		path = path + "/" + fileName;
		if("send".equals(flag)){
			send(request,response,path);
		}else if("show".equals(flag)){
			show(request,response,path);
		}
  1. 如果是我们发送数据,则调用send函数,其中path,代表是我们写入的地址
//获得传送过来的内容
		String content = request.getParameter("content");
		//输出
		PrintWriter out = response.getWriter();
		//拼接内容
		SimpleDateFormat sdf = new SimpleDateFormat("[HH:mm:ss]");
		content = sdf.format(new Date()) + ":" + content;			
		//定义文件输出流
		BufferedWriter bw = null;
		//向record目录中写入
		try {
			 
			 bw = new BufferedWriter(new FileWriter(path,true));
			 bw.write(content);
			 bw.newLine();
			 bw.flush();		 
			 //如果成功
			 out.println(1);
			 out.flush();
			 out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}finally{
			try {
				bw.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
  1. 经过上面,我们便可以将输入的内容写进文件,接下来,我们便需要展示我们的输入,这个功能我们在content.jsp中,进行ajax请求servlet,这里用的是get请求,也符合我们一般用ajax的习惯
//获得展示后台输入内容效果
  	$(function(){
	  	function show(){
	  	  	$.ajax({
	  	  	  	method:"get",
	  	  	  	url:"LivingRoom?flag=show",
	  	  	  	data:null,
	  	  	  	dataType:"text",
	  	  	  	success:function(data){
	  	  	  		$("#showMsg").val(data);
	  	  	  	},
	  	  	  	error:function(){
	  	  	  	  	alert("数据请求错误,请稍后再试!");
	  	  	  	}
	  	  	});
	  	 }
	  	//设置每隔500ms函数执行一次,达到数据快速更新
	  	setInterval(show,500);
  	});
  1. 然后我们看下servlet中的代码
          //读取文件中的内容,返回到页面
		//设置我们返回数据字符类型,不这样,网页会出现乱码
		response.setCharacterEncoding("utf-8");
		StringBuilder builder = new StringBuilder();
		BufferedReader br = null;
		PrintWriter pw = response.getWriter();
		try {
			br = new BufferedReader(new FileReader(path));
			String msg = "";
			while((msg = br.readLine()) != null){
				builder.append(msg+"\r\n");
			}
			pw.println(builder.toString());
			pw.flush();
			pw.close();
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
  1. 这样我们的直播室就这样完成了,其中css代码我没有放上来。

© 著作权归作者所有

共有 人打赏支持
西米火山
粉丝 4
博文 21
码字总数 26957
作品 0
武汉
程序员
编程直播室第一期结束和第二期预告

编程直播室,一个记录项目过程的技术分享,第一期直播内容是Python的基础知识学习,已经结束,内容整理如下,PDF格式文档请到知识星球:编程直播室下载。 下一期直播内容为:ILspy 学习 CadL...

孙亖 ⋅ 05/30 ⋅ 0

汇通直播室是怎么实现的,有研究这一方面的大神么

我看到汇通直播室,是实时更新的新闻,思考力一下背后逻辑,没有想通整个运作流程,包括他的信息采集,信息实时显示,服务器压力的问题,都没穿起来,望大神赐教。汇通直播室地址:http://zh...

Steven_LXF ⋅ 2015/03/22 ⋅ 3

潞河医院远程卒中救治指导系统落地 ——国家远程卒中中心网络试点医院

关键词导读: 卫生计生委脑卒中防治工程是国家医改重大专项,由国家卫计委直接领导,疾控司、医政司、社发司、农村司等单位参与项目管理工作。 远程卒中可以大幅提高基层医院的卒中救治水平,...

putiannst ⋅ 05/11 ⋅ 0

能不能三、五小时入门Python编程

今天,在一个微信群里有人问: 其实,我想说 编程直播室 第一期内容就是尝试做这件事: 为什么有的老鸟在干活的时候也没正经学过什么语言,照样能输出成果,而现在很多教程一本正经的堆砌篇幅...

孙亖 ⋅ 05/14 ⋅ 0

跨平台的视频采集、直播SDK--SmarterStreaming

专注、极致、智慧,国内外为数不多不依赖开源框架、跨平台(windows/android/iOS)、公网推送(支持rtmp)-播放(支持rtmp/rtsp)业界真正靠谱的超低延迟。 适用于秀场直播、媒体移动直播、应急指挥...

大牛直播 ⋅ 2016/03/28 ⋅ 9

流媒体开发之--直播实现

1、流媒体开发之--直播实现 2、流媒体开发之-直播自定义列表 3、流媒体开发之-服务器图片的加载 4、流媒体开发之-直播自定义分类 5、流媒体开发之-获取直播节目预告-1 6、流媒体开发之-直播界...

jwzhangjie ⋅ 2013/08/13 ⋅ 0

用JavaMelody来监控我们的web应用

可以在 http://code.google.com/p/javamelody/downloads/list 下载它,最新的版本发布在https://github.com/javamelody/javamelody/releases/tag/1.51.0 我下载一个javamelody-1.51.0.zip 解......

王爵nice ⋅ 2014/07/24 ⋅ 3

html+js+servlet和jsp+servlet的区别

搞了几年web,有个问题一直没搞清楚。一般是用html+js+servlet还是jsp+servlet,两个有什么区别,哪种方式更好一些。

爪哇小贩 ⋅ 2014/05/14 ⋅ 2

mysql oracle之间的切换

配置了两个数据源mysql,oracle, 系统没有使用框架,jsp+servlet 当从mysql切换到oracle时,是不是sql语句也要相应的为oracle写一套

ldl123292 ⋅ 2013/09/02 ⋅ 2

利用云视频实现在线教育和美女主播系统

利用云视频实现在线教育和美女主播系统。 最近在整视频直播,相对其他web应用。视频直播相对来说还是有点复杂。使用FMS搭建了服务端测试一下,直播还是不够稳定。后来试了下阿里云视频服务,...

得推网络 ⋅ 2016/07/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 46分钟前 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部