websocket及stomp.js

websocket

服務(wù)端(node)

安裝nodejs-websocket

npm i nodejs-websocket

編寫最基本的服務(wù)的代碼,可以查看文檔https://github.com/sitegui/nodejs-websocket

var ws = require("nodejs-websocket");
console.log("開始建立連接...")

var server = ws.createServer(function (conn) {
  // 這里可以監(jiān)聽文本數(shù)據(jù)、二進制數(shù)據(jù)等
  conn.on("text", function (str) {
    console.log("message:" + str)
    conn.sendText("你好衡瓶,我是服務(wù)端");
  })
  conn.on("close", function (code, reason) {
    console.log("關(guān)閉連接")
  });
  conn.on("error", function (code, reason) {
    console.log("異常關(guān)閉")
  });
}).listen(8001)
console.log("listening on *:8001")

客戶端

自html5開始友多,是本身支持websocket的椎工,所以不需要引入其他第三方庫就能直接使用

參考:webSocket 前端如何實現(xiàn)_chuangshaoxia5899的博客-CSDN博客

// 
const ws = new WebSocket('ws://10.10.0.99:8001')
ws.onopen = function () {
  ws.send('你好宿饱,我是客戶端')
}

ws.onmessage = function (e) {
  console.log("接收到服務(wù)端消息" + e.data)
}

ws.onclose = function (e) {
  console.log("服務(wù)關(guān)閉");
}
ws.onerror = function () {
  console.log("連接出錯");
}

stomp.js

從上面的websocket簡單使用可以看出,websocket是非常簡單的仆救,但是他不能像常規(guī)的http訪問一樣請求接口葫男,我們想要按接口一樣請求不同的數(shù)據(jù)础米,就需要使用socket.io.js或者stomp.js。

這里我們主要介紹stomp添诉,stomp.js是一個stomp協(xié)議的js實現(xiàn)屁桑,stomp是一個基于websocket的協(xié)議。

stomp官方有比較詳細的使用文檔:使用 StompJs v5+ - StompJS 系列 (stomp-js.github.io)和簡單示例samples/chat.html at master · stomp-js/samples (github.com)

客戶端使用

沒有找相關(guān)的node服務(wù)端代碼栏赴,公司服務(wù)端是由java完成的掏颊,所以這里就只介紹客戶端了

先安裝依賴 npm i @stomp/stompjs

import { Client } from '@stomp/stompjs'
mounted () {
    this.initStompData()
}
// stomp實例
let stompClient;

// 連接配置文件
const stompConfig = {
    // Typically login, passcode and vhost
    // 連接頭信息,通常是認證登錄信息
    connectHeaders: {
        login: "guest",
        passcode: "guest"
    },

    // 連接url艾帐,應(yīng)該以 ws:// or wss:// 開頭
    brokerURL: "ws://localhost:15674/ws",

    // debug
    debug: function (str) {
        console.log('STOMP: ' + str);
    },

    // 失敗重連時間乌叶,200毫秒
    reconnectDelay: 200,

    // Subscriptions should be done inside onConnect as those need to reinstated when the broker reconnects
    // 連接成功的監(jiān)聽,訂閱應(yīng)該在他內(nèi)部完成
    onConnect: function (frame) {
        // The return object has a method called `unsubscribe`
        // 訂閱/topic/chat這個即可柒爸,返回的對象有一個unsubscribe的方法
        const subscription = stompClient.subscribe('/topic/chat', function (message) {
            const payload = JSON.parse(message.body);
            // 接收到訂閱的消息
        });
    }
}

initStompData(){
    // 創(chuàng)建實例
    stompClient = new Client(stompConfig);
    const payLoad = { user: user, message: message };
    // 向服務(wù)端/topic/chat 發(fā)送數(shù)據(jù)准浴,body只支持字符串,所以對象數(shù)據(jù)需轉(zhuǎn)成字符串發(fā)送
    // 當(dāng)然也可以通過headers發(fā)送捎稚,支持對象形式
    stompClient.publish({destination: '/topic/chat', body: JSON.stringify(payLoad)});
    // stompClient.publish({destination: '/topic/chat', headers: payLoad});
    
    // 發(fā)生錯誤的監(jiān)聽
    client.onStompError = function(frame) {
      console.info('Broker reported error:' + frame.headers['message']);
      console.info('Additional details:' + frame.body);
    }
    
    // 開啟連接
    client.activate()
}
    

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末乐横,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子今野,更是在濱河造成了極大的恐慌葡公,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件条霜,死亡現(xiàn)場離奇詭異催什,居然都是意外死亡,警方通過查閱死者的電腦和手機宰睡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門蒲凶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拆内,你說我怎么就攤上這事旋圆。” “怎么了麸恍?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵灵巧,是天一觀的道長。 經(jīng)常有香客問我抹沪,道長刻肄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任采够,我火速辦了婚禮肄方,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蹬癌。我一直安慰自己权她,他們只是感情好虹茶,可當(dāng)我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著隅要,像睡著了一般蝴罪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上步清,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天要门,我揣著相機與錄音,去河邊找鬼廓啊。 笑死欢搜,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的谴轮。 我是一名探鬼主播炒瘟,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼第步!你這毒婦竟也來了疮装?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤粘都,失蹤者是張志新(化名)和其女友劉穎廓推,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體翩隧,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡樊展,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸽心。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滚局。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖顽频,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情太闺,我是刑警寧澤糯景,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站省骂,受9級特大地震影響蟀淮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜钞澳,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一怠惶、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧轧粟,春花似錦策治、人聲如沸脓魏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茂翔。三九已至,卻和暖如春履腋,著一層夾襖步出監(jiān)牢的瞬間珊燎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工遵湖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留悔政,地道東北人。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓延旧,卻偏偏與公主長得像谋国,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子垄潮,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容