手把手教你搭建一个实时应用程序

在今天的技术发展中，实时应用程序的需求越来越大，比如在线直播、实时聊天等。那么如何搭建一个实时应用程序呢？本文将手把手教你搭建一个基于Websocket的实时聊天程序。

准备工作

在开始搭建之前，我们需要确保已经安装了以下工具：

Node.js
Express.js
Socket.io

创建项目

首先，在命令行中执行以下命令来创建一个新的Node.js项目：

npm init -y

然后，安装Express.js和Socket.io：

npm install express socket.io

编写服务器端代码

在项目根目录下创建一个app.js文件，并编写以下代码：

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

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

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

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

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

编写客户端代码

在项目根目录下创建一个index.html文件，并编写以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Real-time Chat</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <ul id="messages"></ul>
  <input id="m" autocomplete="off" /><button>Send</button>
  <script>
    var socket = io();
    var messages = document.getElementById('messages');
    var form = document.querySelector('form');
    var input = document.getElementById('m');

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

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

启动应用程序

最后，在命令行中执行以下命令来启动应用程序：

node app.js

打开浏览器，在地址栏输入http://localhost:3000，即可看到实时聊天程序的页面。输入消息并发送，即可看到实时更新的聊天内容。

通过以上步骤，你已经成功搭建了一个基于Websocket的实时聊天应用程序。希望本文能帮助到你！

本文来自极简博客，作者：黑暗骑士酱，转载请注明原文链接：手把手教你搭建一个实时应用程序