两个页面之间互相通信

首先搭建express框架，然后通过two页面发送数据给服务器，服务器把数据传送给one页面

在two 中发送数据，在one中显示

  • router/index.js
var axios = require('axios');

router.get('/sse_server', (req, res) => {

  res.setHeader('Content-Type', 'text/event-stream');

  setInterval(function () {

    console.log(message);

    if (message.length > 0) {

      var msg = message.shift();

      res.write('data:' + msg + '\n\n');

    }

  }, 1000);

})

router.get('/one', (req, res) => {

  res.render('one');

})

router.get('/two', (req, res) => {

  res.render('two');

})

router.get('/ajax', (req, res) => {

  var content = req.query.content;

  message.push(content);

  res.end('ok');

})
  • one.ejs
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>新消息</title>

</head>

<body>

  <h1>接受到的消息</h1>

  <script>

    var source = new EventSource('/sse_server');

    var i = 0;

    var timer = null;

    source.onmessage = function(data){

      console.log(data.data);

      if(timer) return;

      timer = setInterval(function () {

        i++;

        if (i % 4 == 0) {

          document.title = '[　　　]接受消息';

        } else if (i % 4 == 1) {

          document.title = '[新　　]接受消息';

        } else if (i % 4 == 2) {

          document.title = '[新消　]接受消息';

        } else if (i % 4 == 3) {

          document.title = '[新消息]接受消息';

        }

      }, 500);

    }

    </script>

</body>

</html>
  • two.ejs
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

  <input type="text">

  <button>发送</button>

  <script>

    var btn = document.querySelector('button');

    btn.onclick = function(){

      var value = $('input').val();

      $.get('/ajax',{content:value},function(res){

        console.log(res);

      })

    }

  </script>

</body>

</html>

SSE两个页面的相互通信的更多相关文章

  1. localstorage实现两个页面通信，购物车原理。

    如:A,B页面,A为商品页,B为购物车页,两个页面同时打开,在A页面点击商品添加至购物车,切换到B页面购物车怎么显示该商品信息 利用localStroage,A页面将数据存入localStroage, ...

  2. NanUI文档 - 如何实现C#与Javascript的相互通信

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript的相互通信 如何处理NanUI中的下载过 ...

  3. iframe及与页面之间的通信

    获取iframe对象 iframe元素本身是位于父级页面中的,所以你可以像一个普通元素一样的使用和操作它 代表了iframe内容window对象是作为一个页面的属性加入到iframe中的, 为了让父级 ...

  4. wmware 怎么 跟主机相互通信

    VMnet1和VMware8其实就是软件模拟出来的两块网卡提供DHCP服务,两块网卡对应VMware的两种不同的模式VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转 ...

  5. 如何实现Windows Phone代码与Unity相互通信（事件方式）

    源地址:http://www.cnblogs.com/petto/p/3909063.html 一些废话 昨天写一篇今天写一篇.不是我闲的蛋疼,是今天一天碰到了好几个恼人的问题,浪费一天时间搞定.本文 ...

  6. 如何实现Windows Phone代码与Unity相互通信（直接调用）

    我之前用了两篇文章写了WP与Unity相互通信.调用的办法,一个是事件,一个是插件. 这次来说个更简单的,我觉得这应该是Unity发布到WP或者Win Store上得天独厚的优势.毕竟都是C#. 懒得 ...

  7. Android：手把手教你 实现Activity 与 Fragment 相互通信,发送字符串信息（含Demo）

    前言Activity 与 Fragment 的使用在Android开发中非常多今天,我将主要讲解 Activity 与 Fragment 如何进行通信,实际上是要解决两个问题: Activity 如何 ...

  8. js 页面间的通信

    看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭我想了半天也没想出来 ...

  9. VUE 自定义组件之间的相互通信

    一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...

随机推荐

  1. HDU 5936 朋友

    题意为给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根. 当一方操作时,他们需要先选择一个不为根的点,满足该点到其父亲的边权为1; 然后 ...

  2. oracle造成系统CPU过高的检查sql

    1. 根据占用CPU高的进程号来查询这个进程执行的SQL语句: CPU过高的进程号: #首先找到CPU过高的进程号 # top -bn1 是静态找到占用最高的进程 [root@localhost ~] ...

  3. java基础3 循环语句：While 循环语句、do while 循环语句、 for 循环语句 和 break、continue关键字

    一.While循环语句 1.格式 while(条件表达式){ 执行语句: } 2.要点 1,先判断后执行 2,循环次数不定 3,避免死循环 3.举例 题目1:输出0-100之间的所有数 class D ...

  4. linux CentOS 上安装chrome

    1.wget http://chrome.richardlloyd.org.uk/install_chrome.sh   (用wget下载shell文件)2.chmod u+x install_chr ...

  5. DNS之XX记录

    DNS服务器里有两个比较重要的记录.一个叫SOA记录(起始授权机构) 一个叫NS(Name Server)记录(域名服务器)关于这两个记录,很多文章都有解释,但是很多人还是很糊涂.我现在通俗的解释一下 ...

  6. appium---【Mac】Appium-Doctor提示WARN：“applesimutils cannot be found”解决方案

    报错提示“ applesimutils cannot be found”截图如下: 解决方案: brew tap wix/brew brew install applesimutils 再次执行app ...

  7. C# 6.0 新特性 (四)

    原文: 1.http://www.cnblogs.com/BoyceYang/p/3711343.html 2.http://www.cnblogs.com/lhking/p/3660182.html ...

  8. volatile 的一个经典例子

    volatile 关键字的两层语义 一旦一个共享变量(类的成员变量.类的静态成员变量)被 volatile 修饰之后,那么就具备了两层语义: 1)保证了不同线程对这个变量进行操作时的可见性,即一个线程 ...

  9. Java 中 JDBC 基础配置

    Java 中 JDBC 基础配置 <resource auth="Container" driverclassname="oracle.jdbc.driver.Or ...

  10. 【C#】日期格式转换

    C#里内置的DateTime基本上都可以实现这些功能,巧用DateTime会使你处理这些事来变轻松多了今天DateTime.Now.Date.ToShortDateString();昨天,就是今天的日 ...