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.ioapp.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),然后入职同程旅游,项目赶进度等等一系列的 ...
随机推荐
- Windows定时任务+bat文件+WinRar处理Mysql数据库的定时自动备份
服务器环境 Windows Server 2003 ,服务器上采用的是IIS+mysql的集成工具phpStudy.MySQL的安装目录D:\phpStudy4IIS , WinRAR 安装目录 C: ...
- 洛谷P1242 新汉诺塔（dfs，模拟退火）
洛谷P1242 新汉诺塔 最开始的思路是贪心地将盘子从大到小依次从初始位置移动到目标位置. 方法和基本的汉诺塔问题的方法一样,对于盘子 \(i\) ,将盘子 \(1\to i-1\) 放置到中间柱子上 ...
- HDU6669 Game（思维，贪心）
HDU6669 Game 维护区间 \([l,r]\) 为完成前 \(i\) 步使用最少步数后可能落在的区间. 初始时区间 \([l,r]\) 为整个坐标轴. 对于第 \(i\) 个任务区间 \([a ...
- sql查询XML
--查询Extra里节点UName值等于“黄”的所有信息 select * from t_UserPayLog where Extra.exist('//UName[.="黄"]' ...
- HTML中margin与padding的区别！(转)
我们以DIV为一个盒子为例,既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内容)”,而盒子的纸壁给他起个名 ...
- firefox SSL_ERROR_RX_RECORD_TOO_LONG burpsuit 报错 解决方案
禁用TLS 1.3 .在Firefox的地址栏中输入“ about:config ”. .在搜索条目“tls.version.max ”.将值从4更改为3. .值4所表示TLS 1.3,3个代表TLS ...
- MySQL 服务器性能剖析
这是<高性能 MySQL(第三版)>第三章的读书笔记. 关于服务,常见的问题有: 如何确认服务器是否发挥了最大性能 找出执行慢的语句,为何执行慢 为何在用户端发生间歇性的停顿.卡死 通过性 ...
- DEDE网站地图优化技巧
DEDE网站地图优化技巧-把网站地图生成在系统根目录,利于搜索引擎收录相信恨多用DEDECMS做站的朋友,为避免将data目录内的东西随便外泄,在robots中将data目录屏蔽了,但是DEDE默认的 ...
- (appium+python)UI自动化_02_appium启动手机app
前提:需先安装配置好appium+python自动化环境,已配置好环境的小伙伴可以参考以下步骤启动Android app,具体步骤如下: 一.USB连接手机 (1)手机USB连接电脑 (2)手机打开开 ...
- MySQL DDL-对库和表的操作
#DDL /* 数据定义语言 库和表的管理 一.库的管理 创建.修改.删除 二.表的管理 创建.修改.删除 创建:create 修改: alter 删除:drop */ 一.库的管理 #1.库的创建 ...