websock(AMQ)通訊-前端

時間 2019-12-05

標籤 websock amq 通訊前端简体版

原文原文鏈接

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

前端開發常常會依賴後端，那麼若是後端服務器還沒作好推送服務器，那麼前端該如何呢。
最簡單的就是本身模擬一個服務器，用node來搭建，這邊只簡單介紹搭建的過程javascript

node搭建服務器

1.選取websocket插件進行開發

按照以下步驟進行開發
在命令臺中輸入如下命令html

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');
    });

})

這樣一個簡易的服務器已經搭建完成。能夠經過客戶端進行測試(客戶端代碼見後面)java

2.選取faye-websocket插件進行開發

在命令臺中輸入如下命令node

npm init -y 
npm i faye-websocket-S

這種方式更簡單了。代碼以下web

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
命令以下ajax

express -e node-js-socketio // express模板安裝
npm i // 安裝express插件
npm i socket.io -S // 安裝socket.io

app.js文件改爲以下代碼express

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如何搭建，等知道後在補充)npm

客戶端（即瀏覽器）調用服務器

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。