express框架实现基于Websocket建立的简易聊天室

下面我将为你详细讲解如何使用express框架实现基于Websocket建立的简易聊天室。

一、准备工作

在开始实现之前，我们需要准备好以下内容：
- Node.js环境
- 一个基础的express web应用
- WebSocket库socket.io

如果你还没有安装Node.js，请先安装好。安装完成后，在控制台中输入以下命令来安装express和socket.io：

npm install --save express socket.io

二、建立Websocket连接

在app.js中引入socket.io：

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

上面的代码中，我们通过createServer()方法创建了一个HTTP服务器，并将其传给socket.io来建立Websocket连接。

三、处理WebSocket连接事件

当客户端与服务端成功建立Websocket连接后，我们需要处理相关事件，这个过程可以通过下面的代码来实现：

io.on('connection', (socket) => {
  console.log('一个用户连接进来了');

  // 监听用户发来的消息
  socket.on('message', (data) => {
    console.log('用户发来一条消息：', data);

    // 广播消息给所有连接进来的用户
    io.emit('message', data);
  });

  // 监听用户断开连接事件
  socket.on('disconnect', () => {
    console.log('一个用户断开连接了');
  });
});

上述代码中，我们通过io.on('connection' ...)方法监听了connection事件，当有用户连接进来时，会触发该事件。在事件的回调中，我们打印了一句Log表示用户连接成功，并通过socket.on('message'...)方法监听了用户发来的消息，接着通过io.emit('message'...)方法广播消息给所有连接进来的用户。最后，我们也监听了disconnect事件，当用户断开连接时打印了一句Log。

四、前端页面

最后，我们需要在前端界面中处理与后端的通信。具体代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebSocket Chat Room</title>
  </head>
  <body>
    <div>
      <label>用户名：</label>
      <input id="username" />
    </div>
    <div>
      <label>消息：</label>
      <input id="message" />
      <button onclick="sendMessage()">发送</button>
    </div>
    <ul id="chatContent"></ul>

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

      // 接收消息
      socket.on('message', (data) => {
        const chatContent = document.getElementById('chatContent');
        const newItem = document.createElement('li');
        newItem.innerText = `[${data.username}]: ${data.message}`;
        chatContent.appendChild(newItem);
      });

      // 发送消息
      function sendMessage() {
        const username = document.getElementById('username').value;
        const message = document.getElementById('message').value;
        socket.send({
          username: username,
          message: message
        });
      }
    </script>
  </body>
</html>

上述代码中，在前端页面中引入了socket.io客户端库，并创建了一个socket实例，接着通过socket.on('message'...)方法监听了服务端发送来的消息，将其添加到聊天内容区域中。同时，我们通过socket.send(...)方法向服务端发送消息。

示例演示

下面我们通过两个简单的示例来演示如何使用express框架实现基于Websocket建立的简易聊天室。

示例一

服务端代码：

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

app.use(express.static('public'));

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

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

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

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

前端页面代码

<!doctype html>
<html>

<head>
  <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;
      text-align: left;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    $(function() {
      const socket = io();
      $('form').submit(function(e) {
        e.preventDefault(); // prevents page reloading
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg) {
        $('#messages').append($('<li>').text(msg));
        window.scrollTo(0, document.body.scrollHeight);
      });
    });
  </script>
</head>

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

</html>

示例二

服务端代码

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.use(express.static('public'));

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

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

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

http.listen(3000, function() {
  console.log('listening on *:3000');
});

前端页面代码

<!doctype html>
<html>

<head>
  <title>Socket.IO chat</title>
  <script src="/socket.io/socket.io.js"></script>
</head>

<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script>
    const socket = io();
    const messages = document.getElementById('messages');
    const form = document.querySelector('form');
    const input = document.querySelector('input');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });

    socket.on('chat message', function(msg) {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</body>

</html>

以上两个示例都是基于Websocket建立的简易聊天室，实现过程类似。只需要将服务端的代码和前端页面进行对应修改即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：express框架实现基于Websocket建立的简易聊天室 - Python技术站

express框架实现基于Websocket建立的简易聊天室

一、准备工作

二、建立Websocket连接

三、处理WebSocket连接事件

四、前端页面

示例演示

示例一

服务端代码：

前端页面代码

示例二

服务端代码

前端页面代码

相关文章