两个页面之间互相通信

首先搭建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. S3C6410 SPI全双工读写流程分析(原创)【转】

    转自:http://blog.csdn.net/hustyangju/article/details/21165721 原创博文,知识共享!转载请注明出处:http://blog.csdn.net/h ...

  2. c#操作pdf文件系列之创建文件

    1.我使用的工具是vs2013,引用的第三方程序集itextpdf 具体安装方法,可以通过nuget搜索iTextSharp然后进行安装. 2具体代码如下 创建两个不同pdf文件,每个地方什么意思代码 ...

  3. MySQL 操作总结

    1. 数据库级别操作 1.1 创建数据库 CREATE DATABASE db1 default charset utf8 collate utf8_general_ci; 1.2 删除数据库 DRO ...

  4. SVN的使用、分支合并及解决冲突详解

    一.什么是SVN SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. 二.SVN的下载安装 下载地址:http ...

  5. fedroa20 没法开启ntpd服务器

    1现象:ntpd老是没法开启,ntpd -d显示有个进程占用123端口. [root@vd13crmtb01 ~]# systemctl enable ntpd.service         //开 ...

  6. [笔记]Linux NTP命令 (ESX适用)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://delxu.blog.51cto.com/975660/307513 [推荐阅读] ...

  7. 动手编写TCP服务器系列之一：日志文件

    前言 在几个月之前,笔者想自己实现一个性能比较良好的基于tcp的服务器.于是断断续续写了个把月,因为还需要找工,还有论文什么的.拖了这么久.现在开辟这样的一个博客,我想记录下自己的思路,也和大家分享自 ...

  8. ios app应用在显示屏幕上改中文名

    1.点击项目名 2.选Build settings 搜索 product name 3.双击,改为需要在手机上显示的应用名

  9. [MySQL] specified key was too long max key length is 767bytes

    https://blog.csdn.net/u012099869/article/details/53815084/

  10. es6js promise在ie中报错“未定义”

    解决办法,我使用https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js直接引入在html中,也可以安装相应的babel-po ...