nodejs socket实现的服务端和客户端功能示例

我来为您讲解一下“nodejs socket实现的服务端和客户端功能示例”的完整攻略，希望能对您有所帮助。

简介

Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它是一个开放源代码、跨平台的服务器端运行环境。在Node.js中，socket可以用来实现服务器与客户端之间的数据传输。本文将介绍Node.js中如何使用socket实现服务端和客户端的功能。

安装socket.io

socket.io是Node.js中常用的socket库，用来实现WebSocket通信。可以通过以下命令在项目中安装：

npm install socket.io

服务端

创建服务器

在Node.js中，可以使用http模块来创建一个服务器。使用socket.io需要先创建一个http服务器，然后将其作为参数传递给socket.io的构造函数。示例代码如下：

const http = require('http');
const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<h1>Hello World</h1>');
});

const io = require('socket.io')(server);
server.listen(3000, () => console.log('listening on port 3000'));

监听连接事件和断开事件

在服务端中，我们可以监听客户端的连接和断开事件，使用socket.io的on方法来监听，示例代码如下：

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

上面的示例代码中，我们使用on方法来监听connection事件，该事件会在有新的客户端连接时触发。同时我们也使用on方法来监听disconnect事件，该事件会在有客户端断开连接时触发。

接收和发送数据

我们可以在服务端中监听客户端发送的消息，并对消息进行处理。在服务端中发送消息也非常简单，只需调用socket.emit方法即可。示例代码如下：

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

上面的示例代码中，我们使用on方法来监听客户端发送的chat message消息，对消息进行处理。同时，使用emit方法发送消息给所有客户端。其中，io.emit可以向所有客户端发送消息，可以传递多个参数，第一个参数为事件名。

客户端

连接服务

在客户端中，我们可以使用socket.io来连接服务。示例代码如下：

const socket = io('http://localhost:3000');

发送和接收数据

在客户端中，可以使用socket.emit方法来发送消息给服务器，使用socket.on方法来接收从服务器发送的消息。示例代码如下：

const socket = io();

$('form').submit((e) => {
  e.preventDefault(); // prevents page reloading
  socket.emit('chat message', $('#m').val());
  $('#m').val('');
  return false;
});

socket.on('chat message', (msg) => {
  $('#messages').append($('<li>').text(msg));
});

上面的代码中，使用submit方法来监听表单提交事件。当表单提交时，调用socket.emit方法将输入框的值作为消息发送到服务器。使用socket.on方法监听从服务器发送的chat message消息，并将消息添加到页面中的消息列表中。

示例说明

示例1：实现聊天室

在这个示例中，我们将创建一个基本的聊天室，让多个客户端能够通过一个服务器进行实时通信。

服务端示例代码：

const http = require('http');
const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<h1>Hello World</h1>');
});

const io = require('socket.io')(server);
server.listen(3000, () => console.log('listening on port 3000'));

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

客户端示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Chat Example</title>
  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <style>
    #messages { list-style-type: none; margin: 0; padding: 0; }
    #messages li { padding: 5px 10px; }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script>
    const socket = io();

    $('form').submit((e) => {
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });

    socket.on('chat message', (msg) => {
      $('#messages').append($('<li>').text(msg));
    });
  </script>
</body>
</html>

在这个示例中，启动服务端并访问聊天室页面，即可在多个客户端之间进行实时通信。

示例2：实现实时数据可视化

在这个示例中，我们将使用socket.io来实现实时数据可视化。当用户在客户端上发送数据时，服务端会实时将数据发送到客户端，客户端会将数据绘制成可视化图形。