Html5中的web workers与server-sent-events

最新推荐文章于 2023-09-06 11:00:27 发布

毛先生是个程序猿

最新推荐文章于 2023-09-06 11:00:27 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/qq_36025062/article/details/73830300

版权

HTML5中Web workers可以多线程，在不影响主页面的使用下，后台运行Javascript代码运行。

主页面与js之间的通讯使用：postMessage()发送数据、onmessage()接收数据。

terminate()方法终止Web Worker。

可分为两种类型：专用线程dedicated web worker，以及共享线程shared web worker。 Dedicated web worker随当前页面的关闭而结束；这意味着Dedicated web worker只能被创建它的页面访问。与之相对应的Shared web worker可以被多个页面访问。在Javascript代码中，“Work”类型代表Dedicated web worker，而“SharedWorker”类型代表Shared web worker。

在绝大多数情况下，使用Dedicated web worker就足够了，因为一般来说在web worker中运行的代码是专为当前页面服务的。而在一些特定情况下，web worker可能运行的是更为普遍性的代码，可以为多个页面服务。在这种情况下，我们会创建一个共享线程的Shared web worker，它可以被与之相关联的多个页面访问，只有当所有关联的的页面都关闭的时候，该Shared web worker才会结束。相对Dedicated web worker，shared web worker稍微复杂些。

下面的例子是专用线程的

demo_worker.js

var i=0;
function timedCount(){
	i=i+1;
	postMessage(i);
	setTimeout("timedCount()",500);
}
timedCount();

主页面

<!DOCTYPE html>
<html>
	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title></title>
	</head>
	<body>
	<p>Count numbers: <output id="result"></output></p>
	<button οnclick="startWorker()">Start Worker</button>
	<button οnclick="stopWorker()">Stop Worker</button>
	<br /><br />
	
	<script>
		var w;
		function startWorker(){
			if(typeof(Worker)!=="undefined"){
			  if(typeof(w)=="undefined"){
			    	w=new Worker("demo_worker.js");
			    }
			 	 	w.onmessage = function (event) {
			    	document.getElementById("result").innerHTML=event.data;
			  	};
			}else{
				document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
			}
		}
		
		function stopWorker(){
			w.terminate();
		}
	</script>	
	</body>
</html>

server-sent-events服务器推送事件

其实有点像默认间隔为3秒的Ajax请求（间隔时间可以修改），相比较与websocket并没有那么实时效果

不同之处可以看看这篇博客点击打开链接

下面是server-sent-events的java的小实例

index.html

<!DOCTYPE HTML>
<html>
<head>
<title>html5  server-sent-events</title>
</head>

<body>
    Temperature: <span id="push"></span><br>
    <button οnclick="start();">Start</button>
    <script type="text/javascript">
    function start() {
        var eventSource = new EventSource("TestServlet");
        eventSource.onmessage = function(event) {
            document.getElementById('push').innerHTML = event.data;
        };
    }
    </script>
</body>
</html>

后台servlet代码

package mseas;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class TestServlet
 */
@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public TestServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//content type must be set to text/event-stream
		response.setContentType("text/event-stream");
		//encoding must be set to UTF-8
		response.setCharacterEncoding("UTF-8");
		PrintWriter writer = response.getWriter();
		Random random = new Random();
		for(int i=0; i<10; i++) {
			writer.write("data: "+ random.nextInt(55)+"\n\n");
			try {
				Thread.sleep(10);
			} catch (InterruptedException e) {
			 e.printStackTrace();
			}
		}
		writer.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

毛先生是个程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5中的web workers与server-sent-events

HTML5中Web workers可以多线程，在不影响主页面的使用下，后台运行Javascript代码运行。主页面与js之间的通讯使用：postMessage()发送数据、onmessage()接收数据。terminate()方法终止Web Worker。可分为两种类型：专用线程dedicated web worker，以及共享线程shared web worker。 Dedic
复制链接

扫一扫