Comment NodeJS implémente la fonction WebSocket-js tutoriel-php.cn

Comment NodeJS implémente la fonction WebSocket

php中世界最好的语言

Libérer： 2018-04-12 16:57:27

original

4177 Les gens l'ont consulté

Cette fois, je vais vous montrer comment NodeJS implémente la fonction WebSocket. Quelles sont les précautions pour que NodeJS implémente la fonction WebSocket. Ce qui suit est un cas pratique, jetons un coup d'œil.

Nous développons sur la base de express et socket.io Nous devons d'abord installer les packages suivants

npm install --save express
npm install --save socket.io

Copier après la connexion

. Code côté serveur :

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
  res.send('<h1>Welcome Realtime Server</h1>');
});
io.on('connection', function(socket){
  console.log('a user connected');
  socket.on("disconnect", function() {
    console.log("a user go out");
  });
  socket.on("message", function(obj) {
    io.emit("message", obj);
  });
});
http.listen(3000, function(){
  console.log('listening on *:3000');
});

Copier après la connexion

Code client

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
</head>
<body>
  <ul id="message"></ul>
  <script>
    socket = io.connect('ws://127.0.0.1:3000');
    socket.emit("message", {"name" : navigator.userAgent, "msg" : "hello world"});
    socket.on("message", function(obj) {
      console.log(obj);
    });
  </script>
</body>
</html>

Copier après la connexion

Une version console du salon de discussion est prête (^o^)/~

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

Comment obtenir l'effet d'annulation et de rétablissement dans Immutable.js

Explication détaillée de l'utilisation de mutations et d'actions dans Vuex

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!