基于node+vue实现简单的WebSocket聊天功能

下面我来详细讲解“基于node+vue实现简单的WebSocket聊天功能”的完整攻略。

前置知识

在开始之前，需要了解一些基础知识：

WebSocket：是一种基于 TCP 协议的新型网络协议，可以实现双向通信。
Node.js：一个基于Chrome V8引擎的JavaScript运行环境。
Vue.js：一个构建用户界面的渐进式框架。
npm：Node.js包管理工具，提供给开发者方便的包安装、更新和分享等功能。

实现步骤

初始化项目

在命令行中执行以下命令：

mkdir chatroom
cd chatroom
npm init -y

安装依赖

执行以下命令安装 express、socket.io 和 nodemon：

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

创建服务器

创建 index.js 并编写以下代码：

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const path = require('path');

const app = express();
const server = http.Server(app);
const io = socketIO(server);

const port = process.env.PORT || 8080;

app.use(express.static(path.join(__dirname, 'public')));

io.on('connection', (socket) => {
  console.log('A client has connected: ' + socket.id);

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

  socket.on('disconnect', () => {
    console.log('A client has disconnected: ' + socket.id);
  });
});

server.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

创建 Vue.js 客户端

在根目录下创建 public 文件夹，在其中创建 index.html 和 index.js。

其中，index.html 的内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chatroom</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="message-form">
      <input id="message-input" autocomplete="off">
      <button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/index.js"></script>
  </body>
</html>

index.js 的内容如下：

const socket = io();

const messageForm = document.querySelector('#message-form');
const messageInput = document.querySelector('#message-input');
const messages = document.querySelector('#messages');

messageForm.addEventListener('submit', (e) => {
  e.preventDefault();
  socket.emit('chat message', messageInput.value);
  messageInput.value = '';
});

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

运行项目

在命令行中执行以下命令：

npm run dev

在浏览器中打开 http://localhost:8080，即可使用聊天功能。

示例说明

示例1：实现聊天室

在上述代码的基础上，可以通过添加用户列表来实现聊天室功能，即在客户端中创建一个用户列表，可以显示当前在线的用户。

在服务器端中增加以下代码：

let users = [];

io.on('connection', (socket) => {
  console.log('A client has connected: ' + socket.id);

  socket.on('new user', (username) => {
    socket.username = username;
    users.push(username);
    io.emit('new user', users);
  });

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

  socket.on('disconnect', () => {
    console.log('A client has disconnected: ' + socket.id);
    const index = users.indexOf(socket.username);
    users.splice(index, 1);
    io.emit('user disconnected', users);
  });
});

在客户端中增加以下代码：

const userList = document.querySelector('#user-list');

socket.on('new user', (users) => {
  while (userList.firstChild) {
    userList.removeChild(userList.lastChild);
  }
  users.forEach((user) => {
    const li = document.createElement('li');
    li.textContent = user;
    userList.appendChild(li);
  });
});

socket.on('user disconnected', (users) => {
  while (userList.firstChild) {
    userList.removeChild(userList.lastChild);
  }
  users.forEach((user) => {
    const li = document.createElement('li');
    li.textContent = user;
    userList.appendChild(li);
  });
});

其中，index.html 中需要添加以下内容：

<ul id="user-list"></ul>

示例2：添加聊天记录

在客户端中增加以下代码：

socket.on('chat message', ({message, username}) => {
  const li = document.createElement('li');
  li.textContent = `${username}: ${message}`;
  messages.appendChild(li);
});

其中，${username}: ${message} 可以任意修改。

在客户端中增加以下样式：

li {
  font-size: 14px;
  line-height: 20px;
  margin: 10px;
  list-style: none;
}

li:nth-child(odd) {
  background-color: #f2f2f2;
}

这样就可以实现聊天记录功能了。

总结

以上就是实现基于 Node.js 和 Vue.js 的 WebSocket 聊天功能的详细步骤和示例说明。需要注意的是，在实际项目中还需要考虑安全性、优化性能等方面的问题。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于node+vue实现简单的WebSocket聊天功能 - Python技术站