小編給大家分享一下node+vue如何實現(xiàn)簡單的WebSocket聊天功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在上海等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供網(wǎng)站設計制作、成都網(wǎng)站建設 網(wǎng)站設計制作定制網(wǎng)站,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站設計,成都營銷網(wǎng)站建設,成都外貿(mào)網(wǎng)站建設公司,上海網(wǎng)站建設費用合理。

最近學習了一下websocket的即時通信，感覺非常的強大，這里我用node啟動了一個服務進行websocket鏈接，然后再vue的view里面進行了鏈接，進行通信，廢話不多說，直接上代碼吧，

首先，我需要用到node的nodejs-websocket模塊

使用yarn進行安裝

yarn add nodejs-websocket --save

當然，你也可以用npm進行安裝

npm i nodejs-websocket --save

安裝完畢之后，我們開始寫服務端的代碼，首先，我用node在本地起了一個node服務器用來開啟websocket服務

sock.js:

let ws = require("nodejs-websocket");
console.log("開始建立鏈接");
ws.createServer(function (conn) {
  conn.on("text", function (str) {
    console.log("收到的信息為", str);
      conn.send(`${str}（機器人`)
  });
  conn.on("close", function (code, reason) {
    console.log("關閉連接")
  });
  conn.on("error", function (code, reason) {
    console.log("異常關閉")
  })
}).listen(8001);
console.log("鏈接建立完畢");

服務端主要是用nodejs-websocket用來開啟服務，以及返回前端需要的值，這里我只是做了一個簡單的處理，在接受值得后面加了一個‘機器人’的string,

然后，我們需要開啟這個node服務，

命令后面的路徑一定要找對，我是把sock.js放在了根目錄的socket文件夾下面

執(zhí)行

yarn socket

最后，看我們的客戶端，客戶端我是想有一個輸入框，然后有個聊天框：

看一下最終效果：

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020新的5個vue.js視頻教程精選

以上是node+vue如何實現(xiàn)簡單的WebSocket聊天功能的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：node+vue如何實現(xiàn)簡單的WebSocket聊天功能-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/jchoo.html