Socket.io 入门

Socket.io是一个用于 Web 应用的 JavaScript 库，允许real-time客户端和服务器之间进行通信。它包含两部分：一个在浏览器中运行的客户端库，以及一个用于的服务器端库node.js。这两个组件的 API 几乎相同。与 Node.js 类似，它也是事件驱动的。聊天应用或社交媒体信息流（用户页面（客户端）接收来自其他用户的消息或帖子）是 Websockets 和 socket.io 最常见的用例。

Socket.IO主要使用websocket协议，并以轮询作为后备选项，同时提供相同的接口。虽然它可以简单地用作的包装器webSocket，但它提供了更多功能，包括向多个套接字广播、存储与每个客户端相关的数据以及异步 I/O。

在本文中，我们将创建一个基本的聊天应用程序，允许用户实时交谈。我们的应用程序将由两个独立的组件组成，一个服务器和一个客户端，每个组件都有不同的职责：

我们的聊天应用程序的服务器职责

向用户提供 HTML、CSS 和 JavaScript 客户端文件
启动Socket.io连接
接收来自客户端的事件（例如新的聊天消息）并将其广播给其他客户端

客户对我们聊天应用的责任

加载socket.io客户端库
与我们服务器上运行的 Socket.io 建立连接
向运行在我们服务器上的 Socket.io 发送事件或从其接收事件
通过 JavaScript 将我们自己的消息添加到聊天中

现在我们知道需要构建什么了，让我们开始吧！

检查 NodeJs 是否已安装

通过在命令提示符中使用以下命令打印其版本来检查您的电脑上是否安装了 nodejs：



1. > node -v
v14.16.0

如果您的终端上没有打印出任何版本，则意味着您的电脑上没有安装 NodeJs。请从NodeJS 网站下载安装程序。

为我们的聊天应用程序创建一个文件夹

现在，让我们为我们的项目创建一个新文件夹：



mkdir chat-app
cd chat-app

mkdir创建新目录。
cd更改当前工作目录。

现在我们在正确的目录中。我们可以先初始化 npm 来设置我们的新项目。

初始化 npm

导航到正确的文件夹后，您可以在该文件夹上初始化 npm：



npm init -y

从技术上讲，使用节点，我们可以从头开始编写我们自己的基本 Web 服务器。然而，在现实世界中人们不会这样做。在现实世界中，有一个非常著名的软件包叫做express。Express是在节点中创建服务器的行业标准。

安装 Express



 npm i express@4.16.4

上述语句的意思是，在指定的版本号上安装express。

在 chat-app 文件夹中，创建一个名为的新文件index.js。

配置我们的服务器

里面index.js添加如下代码：



1. const express=require('express');
2. const app=express();

3. app.get('/',(req,res)=>{
   res.send('Express is up and running!');
})

4. const port=process.env.PORT || 3000;

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

上述代码的解释：

第 1 行：require 函数用于导入库 express，该库存储在名为的变量中express。express 库仅公开一个函数。因此，express 实际上是一个函数，而不是像对象那样的东西。我们调用它来创建一个新的 express 应用程序。

第 2 行：用于使用应用程序本身提供的各种方法来配置我们的服务器。

第 4 行：是您希望应用程序监听的端口。

第5行：用于启动服务器并使其监听特定端口。

您可以通过在命令提示符中使用脚本调用节点来启动服务器：



node index.js
Server is listening on port 3000

在 chat-app 文件夹中，创建一个名为的子目录public。
在 public 文件夹中，创建一个名为 index.html 的新文件。
在 index.html 中添加以下代码：



<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<h1>Socket.io Chat App</h1>

</body>
</html>

在 index.js 中替换



1. const express=require('express');
2. const app=express();

3. app.get('/',(req,res)=>{
   res.send('Express is up and running!');
})

4. const port=process.env.PORT || 3000;

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

用这个：



1. const path=require('path');
2. const express=require('express');

3. const app=express();


4. const port=process.env.PORT || 3000;
5. const publicDirectoryPath=path.join(__dirname,'/public');

6. app.use(express.static(publicDirectoryPath));

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

现在，我们已经完成了更改。我们可以通过在命令提示符中使用脚本调用节点来启动服务器：



node index.js
Server is listening on port 3000

Socket.io 入门

1.0 安装socket.io

Socket.io它不是 Node 的原生包，因此必须安装。由于您需要确保它包含在 Node 模块中，因此请确保先在本地安装它，然后在服务器中引用它。

现在socket.io通过在命令提示符中运行命令 npm install socket.io@2.2.0在 chat-app 目录中安装：



npm install socket.io@2.2.0

您的依赖项部分package.json现在将出现在文件末尾package.json，并将包括socket.io。



{
  "name": "chat-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4",
    "socket.io": "^2.2.0"
  }
}

Express 的基本设置：

Expressapp 可以传递给http将要附加到的服务器socket.io。
现在让我们编辑index.js并添加它：



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



const app=express();
const server=http.createServer(app);
const io=socketio(server);


const port=process.env.PORT || 3000;
const publicDirectoryPath=path.join(__dirname,"/public");

app.use(express.static(publicDirectoryPath));


io.on("connection",(client)=>{
    console.log('New websocket connection');

})

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

socket.io注意，我通过传递serverHTTP 服务器对象来初始化一个新的实例。然后，我监听连接事件以获取传入的套接字，并将其记录到控制台。

</body>现在在 index.html 中的(end body 标签)之前添加以下代码片段：



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

这就是加载所需的全部内容socket.io-client，它会公开一个 io 全局变量，然后进行连接。

再次运行 node index.js，如果它已经在运行，请按 Control + C 重新启动进程，然后node index.js再次运行。现在，将浏览器指向http://localhost:3000。您应该会看到控制台打印出“新的 websocket 连接”

每个套接字还会触发一个特殊的断开事件：



io.on('connection', (client) => {
  console.log('New websocket connection');
  client.on('disconnect', () => {
    console.log(''New websocket disconnected');
  });
});

使用 Socket.io 时最常用的函数是 socket.emit(eventName, data) 和 socket.on(eventName, data)，用于在服务器和客户端发出和捕获事件。socket.emit() 用于发送数据，socket.on() 用于接收数据。根据经验，只需记住为socket.on()发送的每个事件都有一个函数即可socket.emit()。

注意：您eventName可以使用任何自定义名称来称呼它。

示例：基本聊天应用程序

在 index.js 中编辑文件：



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



const app=express();
const server=http.createServer(app);
const io=socketio(server);


const port=process.env.PORT || 3000;
const publicDirectoryPath=path.join(__dirname,"/public");

app.use(express.static(publicDirectoryPath));


io.on("connection",(client)=>{
    console.log('New websocket connection');
 client.on('messageFromClient', msg => {
    io.emit('messageFromServer', msg);
  });
   client.on('disconnect', () => {
    console.log('New websocket disconnected');
  });
})

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

在 index.html 中编辑文件：



<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: Helvetica, Arial, sans-serif; }

      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #efefef; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" placeholder="Say Something..." autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>

    <script>
      var socket = io();

      var messages = document.getElementById('messages');
      var form = document.getElementById('form');
      var input = document.getElementById('input');

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

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

在上面的代码中，发生了两件事。



//server (emit) -> client (receive) -messageFromServer
//client (emit) -> server(receive) -messageFromClient

如果你已经读到这里，非常感谢。希望本教程对你有所帮助，我们下期再见。

如果您喜欢我的作品，请考虑，这样我就可以为您带来更多项目、更多文章

如果您想了解有关 Web 开发的更多信息，请不要忘记在 Youtube 上关注我！

文章来源：https://dev.to/cglikpo/getting-started-with-socket-io-7m4