websock(AMQ)通信-前端

levius 發(fā)布于2019-08-22 17:57 / 3001人閱讀

摘要：服務(wù)端和客戶端之間的通信前端開(kāi)發(fā)經(jīng)常會(huì)依賴后端，那么如果后端服務(wù)器還沒(méi)做好推送服務(wù)器，那么前端該如何呢?？梢酝ㄟ^(guò)客戶端進(jìn)行測(cè)試客戶端代碼見(jiàn)后面選取插件進(jìn)行開(kāi)發(fā)在命令臺(tái)中輸入以下命令這種方式更簡(jiǎn)單了。

服務(wù)端和客戶端之間的通信

前端開(kāi)發(fā)經(jīng)常會(huì)依賴后端，那么如果后端服務(wù)器還沒(méi)做好推送服務(wù)器，那么前端該如何呢。
最簡(jiǎn)單的就是自己模擬一個(gè)服務(wù)器，用node來(lái)搭建，這邊只簡(jiǎn)單介紹搭建的過(guò)程

node搭建服務(wù)器

1.選取websocket插件進(jìn)行開(kāi)發(fā)

按照如下步驟進(jìn)行開(kāi)發(fā)
在命令臺(tái)中輸入以下命令

npm init -y 
npm i websocket -S

安裝完websocket插件后就可以搭建服務(wù)器了，首先新建一個(gè)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");
    });

})

這樣一個(gè)簡(jiǎn)易的服務(wù)器已經(jīng)搭建完成?？梢酝ㄟ^(guò)客戶端進(jìn)行測(cè)試(客戶端代碼見(jiàn)后面)

2.選取faye-websocket插件進(jìn)行開(kāi)發(fā)

在命令臺(tái)中輸入以下命令

npm init -y 
npm i faye-websocket-S

這種方式更簡(jiǎn)單了。代碼如下

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插件進(jìn)行開(kāi)發(fā)

該插件依賴于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);
  });
});

至此服務(wù)器搭建已經(jīng)完成(還有一種是基于stomp.js,目前還沒(méi)弄清楚node如何搭建，等知道后在補(bǔ)充)

客戶端（即瀏覽器）調(diào)用服務(wù)器

1.簡(jiǎn)單的demo如下

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

socket.io

Welcome to socket.io

3 基于AMQ的demo(目前還不知道服務(wù)器如何搭建，但客戶端還是可以用的)

demo里放了3種模式，主要就是Queue和topic，消費(fèi)和發(fā)布
Queue和topic的區(qū)別是一對(duì)多和多對(duì)多（QUEUE發(fā)送一個(gè)人消息之后，就消失了，而topic可以發(fā)送多個(gè)人）




    
    Document

GPU云服務(wù)器云服務(wù)器 AMQ websock websock負(fù)載均衡前端后端如何通信

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95350.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

levius

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Pandas批量刪除dataframe列名中的前綴實(shí)戰(zhàn)：使用lstrip函數(shù)批量刪除列名中的前綴（p

閱讀 1854·2021-11-11 16:55
簡(jiǎn)單5個(gè)步驟實(shí)現(xiàn)個(gè)人博客制作過(guò)程（建站容易運(yùn)營(yíng)不易）

閱讀 2654·2021-08-27 13:11
【回顧九月份第二周】前端你該知道的事兒

閱讀 3689·2019-08-30 15:53
前端面試每日 3+1 —— 第126天

閱讀 2360·2019-08-30 15:44
CSS-字體對(duì)應(yīng)的字重

閱讀 1476·2019-08-30 11:20
善用CSS偽類，不用JS也能做出選項(xiàng)卡功能

閱讀 1098·2019-08-30 10:55
在我水了11種水平垂直居中方法之后，我終于明白了

閱讀 989·2019-08-29 18:40
后管模版整理

閱讀 3107·2019-08-29 16:13

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！