websock(AMQ)通信-前端

levius 發布于2019-08-22 17:57 / 2946人閱讀

摘要：服務端和客戶端之間的通信前端開發經常會依賴后端，那么如果后端服務器還沒做好推送服務器，那么前端該如何呢。可以通過客戶端進行測試客戶端代碼見后面選取插件進行開發在命令臺中輸入以下命令這種方式更簡單了。

服務端和客戶端之間的通信

前端開發經常會依賴后端，那么如果后端服務器還沒做好推送服務器，那么前端該如何呢。
最簡單的就是自己模擬一個服務器，用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如下

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

socket.io

Welcome to socket.io

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

demo里放了3種模式，主要就是Queue和topic，消費和發布
Queue和topic的區別是一對多和多對多（QUEUE發送一個人消息之后，就消失了，而topic可以發送多個人）




    
    Document

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95350.html

websock(AMQ)通信-前端

摘要：服務端和客戶端之間的通信前端開發經常會依賴后端，那么如果后端服務器還沒做好推送服務器，那么前端該如何呢。可以通過客戶端進行測試客戶端代碼見后面選取插件進行開發在命令臺中輸入以下命令這種方式更簡單了。服務端和客戶端之間的通信前端開發經常會依賴后端，那么如果后端服務器還沒做好推送服務器，那么前端該如何呢。最簡單的就是自己模擬一個服務器，用node來搭建，這邊只簡單介紹搭建的過程 nod...

ARGUS 2019-08-02 10:40 評論0 收藏0
[譯] RabbitMQ tutorials (3) ---- 'Pub/Sub'

摘要：生產者只能把消息發到交換器。是否要追加到一個特殊的隊列是否要追加到許多的隊列或者丟掉這條消息這些規則被定義為交換類型。有一點很關鍵，向不存在的交換器發布消息是被禁止的。如果仍然沒有隊列綁定交換器，消息會丟失。發布與訂閱（Publish/Subscribe）在之前的章節中，我們創建了工作隊列，之前的工作隊列的假設是每個任務只被分發到一個worker。在這一節中，我們會做一些完全不一...

zzir 2019-08-21 15:08 評論0 收藏0
rabbitmq中文教程python版 - 發布 / 訂閱

摘要：交易所在本教程的前幾部分中，我們發送消息并從隊列中接收消息。消費者是接收消息的用戶的應用程序。中的消息傳遞模型的核心思想是生產者永遠不會將任何消息直接發送到隊列中。交換和隊列之間的關系稱為綁定。源碼：https://github.com/ltoddy/rabbitmq-tutorial 發布 / 訂閱 (using the Pika Python client) 本章節教程重點介紹的...

alphahans 2019-07-30 16:02 評論0 收藏0
WebSocket就這么回事兒

摘要：服務端確認協議版本，升級為協議。自己寫了一個例子，服務端在開始連接后，利用定時器主動向客戶端發送隨機數，客戶端也可以發給服務器消息，然后服務器返回這條消息給客戶端。做的事情就是給頁面的元素綁定事件。寫在前面webSocket是一項可以讓服務器將數據主動推送給客戶端的技術。前幾天寫了一個日志功能，日志數據需要實時更新。正好項目中有封裝好的WebSocket組件，且接口支持webSock...

ruicbAndroid 2019-08-26 10:57 評論0 收藏0
PHP 程序員也能做的 Java 開發 30分鐘使用 netty 輕松打造一個高性能 websock

摘要：唯一的知識點就是的基礎使用。可以簡單的理解下面的代碼就構建了一個服務器。握手完成之后的消息傳遞則在中處理。實際情況下，不可能那么多人同時說話廣播，而是說話的人少，接受廣播的人多。硬廣一波 SF 官方首頁推薦《PHP進階之路》（你又多久沒有投資自己了？先看后買）我們下面則將一些實際場景都添加進去，比如用戶身份的驗證，游客只能瀏覽不能發言，多房間（頻道）的聊天。該博客非常適合 Java...

kviccn 2019-08-15 10:44 評論0 收藏0