websock(AMQ)通信-前端

ARGUS 發(fā)布于2019-08-02 10:40 / 2323人閱讀

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

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

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

node搭建服務(wù)器

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

按照如下步驟進(jìn)行開發(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è)簡易的服務(wù)器已經(jīng)搭建完成?？梢酝ㄟ^客戶端進(jìn)行測試(客戶端代碼見后面)

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

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

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插件進(jìn)行開發(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,目前還沒弄清楚node如何搭建，等知道后在補(bǔ)充)

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

1.簡單的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ū)別是一對多和多對多（QUEUE發(fā)送一個(gè)人消息之后，就消失了，而topic可以發(fā)送多個(gè)人）




    
    Document

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52505.html

發(fā)表評論

登陸后可評論

0條評論

ARGUS

男|高級講師

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

TA的文章

大部分程序員都記不住的注解，Idea 云筆記卻能輕松記住

閱讀 3516·2021-11-15 11:38
ForwardWeb：美國/新加坡VPS限時(shí)五折優(yōu)惠，低至$12美元/年起

閱讀 836·2021-11-08 13:27
Linux CentOS 6.8一鍵快速安裝vncserver服務(wù)配置遠(yuǎn)程桌面

閱讀 2250·2021-07-29 14:50
編碼規(guī)范-css.md

閱讀 2977·2019-08-29 13:06
CSS篇之inline-block

閱讀 848·2019-08-29 11:22
document.write知多少

閱讀 2419·2019-08-29 11:04
CSS 單位

閱讀 3510·2019-08-28 18:23
jQuery源碼解析之width()

閱讀 896·2019-08-26 13:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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