Nodejs+Socket.io实现通讯实例代码

下面是Nodejs+Socket.io实现通讯实例代码的完整攻略：

1. 简介

Nodejs是一个使用JavaScript编写服务器端代码的平台，Socket.io是一种实时应用程序框架，用于在服务器和客户端之间通过WebSockets进行双向通信。

本文将以一个聊天室应用为例，介绍如何使用Nodejs和Socket.io实现实时通信的功能。

2. 安装Socket.io

要使用Socket.io，需要先安装它。可以使用以下命令在Nodejs项目中安装Socket.io：

npm install socket.io

3. 实现服务器端代码

服务器端代码使用Nodejs编写，代码实现以下功能：

监听客户端的连接请求并接受连接；
监听客户端发送的消息并广播给所有连接的客户端。

以下是服务器端代码的实现：

const server = require('http').createServer();
const io = require('socket.io')(server);

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

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

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});

4. 实现客户端代码

客户端代码使用Socket.io提供的客户端库实现。代码实现以下功能：

连接服务器；
发送消息给服务器；
接受服务器广播的消息并展示在页面上。

以下是客户端代码的实现：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Socket.io Chat Example</title>
</head>

<body>
  <ul id="messages"></ul>
  <form id="form">
    <input id="input" autocomplete="off">
    <button>Send</button>
  </form>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    const form = document.querySelector('#form');
    const input = document.querySelector('#input');
    const messages = document.querySelector('#messages');

    form.addEventListener('submit', event => {
      event.preventDefault();
      const message = input.value;
      socket.emit('chat', message);
      input.value = '';
    });

    socket.on('chat', message => {
      const li = document.createElement('li');
      li.textContent = message;
      messages.appendChild(li);
    });
  </script>
</body>

</html>

5. 示例说明

下面介绍两种有关聊天室应用的实例说明。

示例一：在同一页面中使用两个聊天室

可以在同一页面中使用两个聊天室，一个用于公共聊天，另一个用于私人聊天。以下是实现方式：

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

  // 实现公共聊天室
  socket.on('public chat', message => {
    console.log('public message: ' + message);
    io.emit('public chat', message);
  });

  // 实现私人聊天室
  socket.on('private chat', (message, target) => {
    console.log('private message to ' + target + ': ' + message);
    socket.to(target).emit('private chat', message);
  });

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Socket.io Chat Example</title>
</head>

<body>
  <h2>Public Chat Room</h2>
  <ul id="public-messages"></ul>
  <form id="public-form">
    <input id="public-input" autocomplete="off">
    <button>Send</button>
  </form>

  <h2>Private Chat Room</h2>
  <ul id="private-messages"></ul>
  <form id="private-form">
    <input id="private-input" autocomplete="off">
    <input id="private-target" placeholder="Target" autocomplete="off">
    <button>Send</button>
  </form>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    const publicForm = document.querySelector('#public-form');
    const publicInput = document.querySelector('#public-input');
    const publicMessages = document.querySelector('#public-messages');

    const privateForm = document.querySelector('#private-form');
    const privateInput = document.querySelector('#private-input');
    const privateTarget = document.querySelector('#private-target');
    const privateMessages = document.querySelector('#private-messages');

    publicForm.addEventListener('submit', event => {
      event.preventDefault();
      const message = publicInput.value;
      socket.emit('public chat', message);
      publicInput.value = '';
    });

    socket.on('public chat', message => {
      const li = document.createElement('li');
      li.textContent = message;
      publicMessages.appendChild(li);
    });

    privateForm.addEventListener('submit', event => {
      event.preventDefault();
      const message = privateInput.value;
      const target = privateTarget.value;
      socket.emit('private chat', message, target);
      privateInput.value = '';
    });

    socket.on('private chat', message => {
      const li = document.createElement('li');
      li.textContent = message;
      privateMessages.appendChild(li);
    });
  </script>
</body>

</html>

示例二：使用用户名和房间进行分组

可以使用用户名和房间进行分组，避免不同房间之间的消息冲突。以下是实现方式：

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

  socket.on('join', (username, room) => {
    console.log('user ' + username + ' joined room ' + room);
    socket.join(room);
    io.to(room).emit('join', username + ' joined the room');
  });

  socket.on('leave', room => {
    console.log('user left room ' + room);
    socket.leave(room);
    io.to(room).emit('leave', 'a user left the room');
  });

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

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Socket.io Chat Example</title>
</head>

<body>
  <div id="login">
    <h2>Login</h2>
    <input id="username" placeholder="Username" autocomplete="off">
    <input id="room" placeholder="Room" autocomplete="off">
    <button>Join Room</button>
  </div>

  <div id="chat" style="display: none;">
    <h2 id="room-name"></h2>
    <ul id="messages"></ul>
    <form id="form">
      <input id="input" autocomplete="off">
      <button>Send</button>
    </form>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    const login = document.querySelector('#login');
    const username = document.querySelector('#username');
    const room = document.querySelector('#room');
    const joinButton = document.querySelector('button');

    const chat = document.querySelector('#chat');
    const roomName = document.querySelector('#room-name');
    const messages = document.querySelector('#messages');
    const form = document.querySelector('#form');
    const input = document.querySelector('#input');

    joinButton.addEventListener('click', () => {
      const name = username.value;
      const roomName = room.value;
      socket.emit('join', name, roomName);
      login.style.display = 'none';
      chat.style.display = 'block';
      roomName.textContent = roomName;
    });

    form.addEventListener('submit', event => {
      event.preventDefault();
      const message = input.value;
      socket.emit('chat', message, roomName.textContent);
      input.value = '';
    });

    socket.on('join', message => {
      const li = document.createElement('li');
      li.textContent = message;
      messages.appendChild(li);
    });

    socket.on('leave', message => {
      const li = document.createElement('li');
      li.textContent = message;
      messages.appendChild(li);
    });

    socket.on('chat', message => {
      const li = document.createElement('li');
      li.textContent = message;
      messages.appendChild(li);
    });
  </script>
</body>

</html>

以上就是Nodejs+Socket.io实现通讯实例代码的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Nodejs+Socket.io实现通讯实例代码 - Python技术站