Wie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet-js-Tutorial-php.cn

Wie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet

醉折花枝作酒筹

Freigeben： 2021-04-23 09:16:49

nach vorne

1844 Leute haben es durchsucht

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Instant-Messaging-Frontend-Methode von socket.io zur Zusammenarbeit mit Node. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Wie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet

Schauen Sie sich zuerst den Effekt an, hahaha, er ist immer noch so klein.
Wie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet

Zuerst müssen wir einen neuen Ordner erstellen und schnell eine package.json-Datei generieren
in der aktuellen Datei Der Speicherort cmd

npm init -y  //生成一个package.json

Nach dem Login kopieren

wurde erfolgreich gestartet

und es gibt kein Problem, wenn Sie es im Browser überprüfen

Wie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet . Als nächstes schreiben wir weiter serverRoom.js

npm i express
npm i socket.io

Nach dem Login kopieren

Front-End-HTML

const express = require(&#39;express&#39;)const app = express()let port =3000app.get(&#39;/&#39;,(req,res,next)=>{
    res.writeHead(200, { &#39;Content-type&#39;: &#39;text/html;charset=utf-8&#39; })
    res.end(&#39;欢迎来到express&#39;)
    next()})const server = app.listen(port,()=>{console.log(&#39;成功启动express服务,端口号是&#39;+port)})

Nach dem Login kopieren

Wie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet

Wenn der Dienst gestartet wird, wird die Front-End-Seite automatisch mit unserem Back-End-Dienst verknüpft. Der Link löst erfolgreich das webEvent-Ereignis aus (der Name kann Sie müssen es selbst definieren und die Vorder- und Rückseite müssen vereinheitlicht werden. Die Front-End-Überwachung erfolgt. Das WebEvent-Ereignis ruft den vom Server gesendeten Inhalt ab und zeigt ihn per Warnung an.

Okay, das Obige ist in Ordnung und das Folgende ist leicht zu verstehen:

Die unten zu implementierende Funktion besteht darin, etwas in das Eingabefeld einzugeben, es an den Server zu übergeben, der Server gibt ein Array zurück und das Front-End zeigt es auf der Seite an

//Natürlich ist es nur für Um die Funktion zu lernen, machen Sie sich keine Gedanken über Beispiele

Schauen Sie sich das Front-End-HTML an

node serverRoom.js  
//或者使用  快速更新serverRoom.js的变化 同步到当前打开的服务器
//可以通过 npm i nodemon -g 下载到全局 使用很是方便 不亦乐乎
nodemon serverRoom.js

Nach dem Login kopieren

Serverseitig

const express = require(&#39;express&#39;)const app = express()let port =3000app.get(&#39;/&#39;,(req,res,next)=>{
    res.writeHead(200, { &#39;Content-type&#39;: &#39;text/html;charset=utf-8&#39; })
    res.end(&#39;欢迎来到express&#39;)
    next()})const server = app.listen(port,()=>{console.log(&#39;成功启动express服务,端口号是&#39;+port)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);io.on('connect',(websocketObj)=>{  //connect 固定的  
    //链接成功后立即触发webEvent事件
    websocketObj.emit('webEvent','恭喜链接websocket服务成功：目前链接的地址为：http://127.0.0.1:3000')})

Nach dem Login kopieren

Geben Sie nach dem Öffnen der Seite ein Klicken Sie auf den Wert in der Eingabe, klicken Sie auf die Schaltfläche, um die sendFun-Funktion auszulösen, das benutzerdefinierte Ereignis sendFunEvent auszulösen und den Eingabewert an den Server zu übertragen. Der Server hört auf das sendFunEvent-Ereignis, schiebt die Daten in das Array, löst das sendFunEventCallBack-Ereignis aus und Übergibt die Array-JSON-Zeichenfolge an das Front-End. Das Front-End lauscht dem sendFunEventCallBack-Ereignis, ruft das Array ab, serialisiert es und leitet die Daten an die Seite weiter.

Öffnen Sie mehrere Front-End-Seiten für Echtzeit-Updates und Chat.

【Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene

】

Das obige ist der detaillierte Inhalt vonWie das Instant-Messaging-Frontend von socket.io mit Node zusammenarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!