websock(AMQ)通信-前端

服务端和客户端之间的通信

前端开发经常会依赖后端，那么如果后端服务器还没做好推送服务器，那么前端该如何呢。
最简单的就是自己模拟一个服务器，用node来搭建，这边只简单介绍搭建的过程

node搭建服务器

1.选取websocket插件进行开发

按照如下步骤进行开发
在命令台中输入以下命令

npm init -y

npm i websocket -S

安装完websocket插件后就可以搭建服务器了，首先新建一个app.js，并且代码如下

var webSocketsServerPort = 3002

var webSocketServer = require('websocket').server

var http = require('http')

var server = http.createServer(function(req, res) {

})

server.listen(webSocketsServerPort, function() {

    console.log((new Date()) + "Server is listening on port " + webSocketsServerPort)

})

/**

 * websock server

 */

var wsServer = new webSocketServer({

    httpServer: server

})

wsServer.on('request', function(request) {

    var connection = request.accept(null, request.origin);

    connection.on('message', function(message) {

        console.log('message');

    });

    connection.on('close', function(connection) {

        console.log('close');

    });

})

这样一个简易的服务器已经搭建完成。可以通过客户端进行测试(客户端代码见后面)

2.选取faye-websocket插件进行开发

在命令台中输入以下命令

npm init -y

npm i faye-websocket-S

这种方式更简单了。代码如下

var WebSocket = require('faye-websocket'),

    http      = require('http');

var server = http.createServer();

server.on('upgrade', function(request, socket, body) {

  if (WebSocket.isWebSocket(request)) {

    var ws = new WebSocket(request, socket, body);

    ws.on('message', function(event) {

      ws.send(event.data);

    });

    ws.on('close', function(event) {

      console.log('close', event.code, event.reason);

      ws = null;

    });

  }

});

server.listen(3002);

3.选取socket.io插件进行开发

该插件依赖于express
命令如下

express -e node-js-socketio // express模板安装

npm i // 安装express插件

npm i socket.io -S // 安装socket.io

app.js文件改成如下代码

var app = require('express')()

  , server = require('http').createServer(app)

  , io = require('socket.io').listen(server);

server.listen(3002);

app.get('/', function (req, res) {

  res.sendfile(__dirname + '/client/index.html');

});

io.sockets.on('connection', function (socket) {

  socket.emit('news', { hello: 'world' });

  socket.on('my other event', function (data) {

    console.log(data);

  });

});

至此服务器搭建已经完成(还有一种是基于stomp.js,目前还没弄清楚node如何搭建，等知道后在补充)

客户端（即浏览器）调用服务器

1.简单的demo如下

<html>

<body>

    <div id="output"></div>

    <script>

    function checkBrowser() {

        if (window.WebSocket) {

            log("This browser supports WebSocket!");

        } else {

            log("This browser does not support WebSocket.");

        }

    }

    function setup() {

        var wsServer = 'ws://localhost:3002';

        var ws = new WebSocket(wsServer);

        ws.onopen = function(e) {

            log("Connected to WebSocket server.", e);

            sendMessage("Conan");

        };

        ws.onclose = function(e) {

            log("Disconnected", e);

        };

        ws.onmessage = function(e) {

            log("RECEIVED: " + e.data, e);

            ws.close();

        }

        ws.onerror = function(e) {

            log('Error occured: ' + e.data, e);

        };

        var sendMessage = function(msg) {

            ws.send(msg);

            log("SEND : " + msg);

        }

    }

    function log(s, e) {

        var output = document.getElementById("output");

        var p = document.createElement("p");

        p.style.wordWrap = "break-word";

        p.style.padding = "10px";

        p.style.background = "#eee";

        p.textContent = "LOG : " + s;

        output.appendChild(p);

        console.log("LOG : " + s, e);

    }

    checkBrowser();

    setup();

    </script>

</body>

</html>

2.基于express的socket.io的demo如下

<!DOCTYPE html>

<html>

<head>

<title>socket.io</title>

</head>

<body>

<h1>socket.io</h1>

<p>Welcome to socket.io</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>

<script>

var socket = io.connect('http://localhost:3002');

socket.on('news', function (data) {

console.log(data);

socket.emit('my other event', { my: 'data' });

});

</script>

</body>

</html>

3 基于AMQ的demo(目前还不知道服务器如何搭建，但客户端还是可以用的)

demo里放了3种模式，主要就是Queue和topic，消费和发布
Queue和topic的区别是一对多和多对多（QUEUE发送一个人消息之后，就消失了，而topic可以发送多个人）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <script type="stompjs"></script>

    <script type="text/javascript">

    // 3种模式

    // QUeue是只有1对多模式，，topic多对多模式

    // 1.消息发布者模式

    var client = Stomp.overTCP('localhost', 61613);

    // uncomment to print out the STOMP frames

    var connectCallback = function(frame) {

        var subscription = client.subscribe('/topic/FirstQueue', onMessage);

        //subscription.unsubscribe();

    };

    var onMessage = function(message){

        if (message.body) {

          console.log("got message with body " + message.body)

        } else {

          console.log("got empty message");

        }

    };

    var errorCallback = function(error){

        console.log(error.headers.message);

    };

    client.connect('admin', 'admin', connectCallback,errorCallback);

    // 2.Queue消息消费者

    var Stomp = require('stompjs');

    // Use raw TCP sockets

    var client = Stomp.overTCP('localhost', 61613);

    // uncomment to print out the STOMP frames

    // client.debug = console.log;

    var connectCallback = function(frame) {

        var subscription = client.subscribe('/queue/FirstQueue', onMessage);

        //subscription.unsubscribe();

    };

    var onMessage = function(message){

        if (message.body) {

          console.log("got message with body " + message.body)

        } else {

          console.log("got empty message");

        }

    };

    var errorCallback = function(error){

        console.log(error.headers.message);

    };

    client.connect('admin', 'admin', connectCallback,errorCallback);

    // 3.topic 消息订阅者模式

    // Use raw TCP sockets

    var client = Stomp.overTCP('localhost', 61613);

    // uncomment to print out the STOMP frames

    // client.debug = console.log;

    var connectCallback = function(frame) {

        var subscription = client.subscribe('/topic/FirstQueue', onMessage);

        //subscription.unsubscribe();

    };

    var onMessage = function(message){

        if (message.body) {

          console.log("got message with body " + message.body)

        } else {

          console.log("got empty message");

        }

    };

    var errorCallback = function(error){

        console.log(error.headers.message);

    };

    client.connect('admin', 'admin', connectCallback,errorCallback);

    </script>

</body>

</html>

websock(AMQ)通信-前端的更多相关文章

C# Socket通信改进记录
1. Socket 使用原始Socket,Send和Recv方法进行发送和消息获取.(另起后台线程不停获取和发送) public void RecvMsg() { //receive messag ...
王下邀月熊_Chevalier的前端每周清单系列文章索引
感谢王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...
【学习笔记】Linux基础（零）：预备知识
学习笔记(连载)之Linux系列 Note:本学习笔记源自<鸟哥的Linux私房菜(基础学习篇)>一书,为此书重要内容的摘要和总结,对于一些常识性的知识不再归纳新型冠状病毒引发的肺炎战& ...
《SpringCloudDubbo开发日记》（一）Nacos连官方文档都没写好
背景现在的微服务框架一般分dubbo和springcloud两套服务治理体系,dubbo是基于zookeeper为注册中心,springcloud是基于eureka作为注册中心. 但是现在eurek ...
script标签crossorigin属性及同源策略和跨域方法
首先介绍(同源策略) 同源策略是浏览器最核心且基本的安全约定,要求协议.域名.端口都相同为同源,如果非同源时请求数据浏览器会在控制台抛出跨域异常错误,同源策略是浏览器的行为,即使客户端请求发送了,服务 ...
腾讯IVWEB团队：前端 fetch 通信
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:villainthr 文章摘自: 前端小吉米随着前端异步的发展, XHR 这种耦合方式的书写不利于前端 ...
前端通信：SSE设计方案（二）--- 服务器推送技术的实践以及一些应用场景的demo（包括在线及时聊天系统以及线上缓存更新，代码热修复案例）
距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...
前端通信：ajax设计方案（八）--- 设计请求池，复用请求，让前端通信快、更快、再快一点
直接进入主题,本篇文章有点长,包括从设计阶段,到摸索阶段,再到实现阶段,最后全面覆盖测试阶段(包括数据搜集清洗),还有与主流前端通信框架进行对比PK阶段. 首先介绍一下一些概念: 1. 浏览器的并发能 ...
前端通信：ajax设计方案（六）--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布
距离上一次博客大概好多好多时间了,感觉再不搞点东西出来,感觉就废了的感觉.这段时间回老家学习驾照,修养,然后7月底来上海求职(面了4家,拿了3家office),然后入职同程旅游,项目赶进度等等一系列的 ...

随机推荐

人脸对比微信小程序
https://cloud.tencent.com/document/product/867/17584 测试数据: 图片1: 图片2:
linux 统计代码行数
列出目录下所有文件(仅有文件名):ls -laR 列出目录下所有文件名称find . * 统计当前目录下全部代码行数find . * | xargs wc -l 统计当前目录下java文件行数,去除空 ...
quick bi dashboard 控件样式控制。
控件样式控制 1 想要的效果图 2 查询样式里面进行设置
Jmeter从数据库中读取数据
Jmeter从数据库中读取数据 1.测试计划中添加Mysql Jar包 2.添加线程组 3.添加 jdbc connection configuration 4.添加JDBC Request,从数据库 ...
【MM系列】SAP KP26 报工出错
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP KP26 报工出错前言 ...
Bootstrap 学习笔记8 下拉菜单滚动监听
代码部分: <nav class="navbar navbar-default"> <a href="#" class="navba ...
Git010--解决冲突
Git--解决冲突本文来自于:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/ ...
排序算法三：堆排序（Heapsort）
堆排序(Heapsort)是一种利用数据结构中的堆进行排序的算法,分为构建初始堆,减小堆的元素个数,调整堆共3步. (一)算法实现 protected void sort(int[] toSort) ...
Yaconf – 一个高性能的配置管理扩展
鸟哥出品:http://www.laruence.com/2015/06/12/3051.html 首先说说, 这个是干啥的. 我见过很多的项目中, 用PHP文件做配置的, 一个config目录下可能 ...
html5_websql
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function ...