Heim > Artikel > Web-Frontend > 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-AuswahlWeitere 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!