Wie implementiert Node+vue eine einfache WebSocket-Chat-Funktion? (Codebeispiel)

Verwandte Empfehlungen: „node js-Tutorial“

Ich habe kürzlich etwas über Websocket-Instant Messaging gelernt und es fühlt sich sehr leistungsfähig an. Hier verwende ich Node, um einen Dienst für Websocket-Links zu starten, und mache es dann in der Ansicht vue Holen Sie sich den Link und kommunizieren Sie direkt mit dem Code.

Zuerst muss ich das Nodejs-Websocket-Modul verwenden.

Verwenden Sie Garn, um es zu installieren zu installieren

yarn add nodejs-websocket --save

Nachdem die Installation abgeschlossen ist, beginnen wir mit dem Schreiben des Servercodes. Zuerst verwende ich node, um lokal einen Knotenserver einzurichten, um den Websocket-Dienst zu starten

sock.js:

npm i nodejs-websocket --save

Der Server verwendet hauptsächlich nodejs -websocket, um den Dienst zu starten und den vom Frontend benötigten Wert zurückzugeben. Hier habe ich einfach einen einfachen Vorgang durchgeführt und nach dem akzeptierten Wert eine Zeichenfolge „Robot“ hinzugefügt:

Dann müssen wir diesen Knotendienst starten,

Nach dem Befehl muss der Pfad korrekt gefunden werden. Ich habe sock.js unter dem Socket-Ordner im Stammverzeichnis abgelegt Box und dann ein Chat-Frame:

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("链接建立完毕");

Sehen Sie sich den Endeffekt an:

Verwandte Empfehlungen:

Zusammenfassung der Fragen zum Front-End-Vue-Interview 2020 (mit Antworten)

Vue-Tutorial-Empfehlung: 2020 neueste 5 vue .js-Video-Tutorial-Auswahl

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierlehre! !

Das obige ist der detaillierte Inhalt vonWie implementiert Node+vue eine einfache WebSocket-Chat-Funktion? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!