【第97期】一文认识AI写作工具一文读懂WebSockets(Socket.IO)-技术圈

概述

WebSockets是一种通信协议，提供了客户端和服务器之间的全双工通信能力。这意味着客户端和服务器可以在任何时候相互发送消息，而无需像传统的HTTP请求那样重新建立连接。Socket.IO是一个基于WebSockets的JavaScript库，它不仅提供了跨平台的实时双向通信能力，还解决了WebSockets的兼容性问题，并且具有易于使用的API。

入门Socket.IO

安装

首先，你需要在你的项目中安装Socket.IO。如果你使用的是Node.js，可以通过npm轻松安装：

npm install socket.io

对于客户端，你可以通过在HTML文件中添加以下标签来引入Socket.IO：

<script src="/socket.io/socket.io.js"></script>

基础示例

服务器端

在Node.js中，你可以这样初始化一个Socket.IO服务器：

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('新用户连接');
  socket.on('disconnect', () => {
    console.log('用户断开连接');
  });
});

上述代码创建了一个监听3000端口的Socket.IO服务器。每当有新用户连接时，就会打印出“新用户连接”，当用户断开连接时，会打印出“用户断开连接”。

客户端

在客户端，连接到Socket.IO服务器：

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

socket.on('connect', () => {
  console.log('已连接到服务器');
});

这段代码会尝试连接到运行在本地3000端口的Socket.IO服务器，并在成功连接后在控制台打印出消息。

实战应用：实时聊天应用

让我们一起创建一个简单的实时聊天应用，以此来更好地理解Socket.IO的实际应用。

服务器端

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('新用户连接');
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

在这个示例中，服务器监听名为chat message的消息。每当收到消息时，服务器就会将这个消息广播给所有连接的客户端。

客户端

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO 聊天示例</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    socket.on('chat message', function(msg){
      var item = document.createElement('li');
      item.textContent = msg;
      document.getElementById('messages').appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>发送</button>
  </form>

  <script>
    var form = document.querySelector('form');
    var input = document.getElementById('m');
    form.onsubmit = function(e) {
      e.preventDefault();
      socket.emit('chat message', input.value);
      input.value = '';
      return false;
    };
  </script>
</body>
</html>

在客户端，我们创建了一个简单的HTML页面，包括一个用于显示消息的列表和一个用于发送消息的表单。每当用户提交表单时，客户端就会通过Socket.IO向服务器发送消息。同时，它也监听从服务器接收的chat message消息，并将其添加到页面上。

关注我们

- END -