node.js verwendet Socket, um die gemeinsame Nutzung von Chat-Instanzen zu implementieren-js-Tutorial-php.cn

node.js verwendet Socket, um die gemeinsame Nutzung von Chat-Instanzen zu implementieren

小云云

Freigeben： 2018-01-15 13:23:23

Original

1529 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode von node.js vorgestellt, der Socket zum Implementieren des Chats verwendet. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Server-Setup

app.js

const http = require("http");
const express = require("./express");

//创建一个服务
const server = http.createServer(express);

//监听服务端口
server.listen(8001,()=>{
  console.log("服务端已经启动,请访问 http://localhost:8001");
});

Nach dem Login kopieren

express.js

const url=require("url");
const fs=require("fs");

function express(req,res){
  var urlObj=url.parse(req.url);
  //console.log(urlObj);

  var filePath="./www"+urlObj.pathname;
  var content="not found";
  if(fs.existsSync(filePath)){
    content=fs.readFileSync(filePath);
  }
  
  res.end(content.toString());
}


module.exports=express;

Nach dem Login kopieren

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8"/>
    <title>Socket.IO chat</title>
    <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { font: 13px Helvetica, Arial; }
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
     #messages { list-style-type: none; margin: 0; padding: 0; }
     #messages li { padding: 5px 10px; }
     #messages li:nth-child(odd) { background: #eee; }
    </style>
   </head>
   <body>
    <ul id="messages"></ul>
    <form action="">
     <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="js/lib/jquery-1.11.1.js"></script>
    <script src="js/lib/socket.io.js"></script> 
    <script src="js/index.js"></script>
   </body>
</html>

Nach dem Login kopieren

Client-Service-Aufbau und Serverkommunikation

Wir müssen eine Server-Socket-Anfrageverbindung herstellen

io.on(&#39;connection&#39;, function(socket){
  console.log(&#39;a user connected&#39;);

  //断开连接
  socket.on(&#39;disconnect&#39;, function(){
    console.log(&#39;user disconnected&#39;);
  });
});

Nach dem Login kopieren

index.js

//客户端建立连接 
var socket = io(); 
客户端向服务端发送请求
index.js

$(&#39;form&#39;).submit(function(){
  //触发事件
  socket.emit(&#39;chat message&#39;, $(&#39;#m&#39;).val());
  $(&#39;#m&#39;).val(&#39;&#39;);
  return false;
 });

Nach dem Login kopieren

app.js

//接收客户端的信息
socket.on(&#39;chat message&#39;, function(msg){
  console.log(&#39;message: &#39; + msg);
});

Nach dem Login kopieren

Serverdaten an den Client senden

socket.on(&#39;chat message&#39;, function(msg){
    console.log(&#39;message: &#39; + msg);

    socket.broadcast.emit("clientE",msg);
  });

Nach dem Login kopieren

Der Client empfängt die vom Server gesendeten Daten

socket.on(&#39;clientE&#39;, function(msg){
  $(&#39;#messages&#39;).append($(&#39;<li>&#39;).text(msg));
});

Nach dem Login kopieren

Verwandte Empfehlungen:

nodejs implementiert WebSocket-Chat basierend auf der WS-Modulfunktion

Beispiel für die gemeinsame Nutzung einer WeChat-Chat-Schnittstelle mit JQuery-Imitation

Beispiel für einen detaillierten Chatraum für die Kommunikation zwischen Vater und Sohn in der Vue-Komponente

Das obige ist der detaillierte Inhalt vonnode.js verwendet Socket, um die gemeinsame Nutzung von Chat-Instanzen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!