Socket.io リアルタイム通信に関するいくつかの論文

WebSocketリアルタイム通信用のsocket-io

著者の序文

読者の皆様、このところ諸事情によりブログの更新ができずにいたことを深くお詫び申し上げますが、その不具合が解消されましたので、今後は毎日の更新が可能となると思います。！

WebSocketについて

Websocket ブラウザーとサーバー間でインスタントメッセージングサービスを実現するロングコネクションモードに基づくプロトコルで、一度クライアントとサーバー間でWebSocket接続を確立すると、いつでもどこでも通信が可能になります。

ネットワーク通信における長い接続と短い接続

短い接続

ショート接続: クライアントはサーバーにリンクを確立するためのリクエストを送信します。接続が確立されると、クライアントはサーバーにメッセージを送信し、サーバーはそれを受信して処理し、接続が切断されたことを示す応答を返します。
ここに画像の説明を挿入

短いリンクにより、サーバー側のリソース使用率を最適化できます。
比如HTTP协议是一款基于短链接模式的协议，意味着连接建立完毕之后，客户端向服务端发送请求之后服务器响应或超时之后就会断开，如果希望再次链接就只能再去发送请求

長い接続

長い接続: クライアントはサーバーにリンクを確立するためのリクエストを送信します。接続が確立されると、クライアントはサーバーにメッセージを送信し、サーバーはそれを受信して処理します。応答が返された後は、リンクは確立されません。両方のエンドでこのリンクをフォローアップデータのやり取りに使用することもできます
ここに画像の説明を挿入

長時間の接続でクライアントとサーバー間の即時通信を実現

ソケット.ioフレームワーク

インストール

後部

npm install socket.io

フロントエンドインポート

通常の状況では、Socket.io によって構築されたサーバーはフロントエンド js ファイルを静的にホストする/socket.io/socket.io.jsため、インポートして登録する必要があります。

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

Socket.io の概要

Socket.io は、webSocket 操作をカプセル化するネットワーク操作ライブラリです。ブラウザがサーバーセグメントとの WebSocket リンクを簡単に確立し、このリンクを通じて通信できるように、いくつかの単純な API メソッドを提供します
公式ドキュメント:ポータル
中国語ドキュメント:ポータル

バックエンドプロジェクト

1. モジュールがインストールされているディレクトリに新しい js ファイルを作成し、任意の名前を付けます
2. 通常、http サーバーではソケット io を使用するため、このコードの記述と構築については次に説明します。以下のとおりであります

npm init -y 
// 初始化项目包
npm i express
// 安装express
npm i cors
// 安装cors模块解决跨域
npm i socket.io
// 安装Socket.io

3. 次のコードを記述します

const express = require('express');
// 导入express模块
const app = express();
const http = require('http');
// 导入http模块
const server = http.createServer(app);
// 注册http服务器
const {
    
     Server } = require("socket.io");
const io = new Server(server, {
    
    
  cors:{
    
    
    origin: '*'
  }
});
// 解决跨域
io.on('connection', (socket) => {
    
    
  console.log('有客户端连进来了:'+socket.id);
  socket.on('textmsg', function(data){
    
    
    // 接收到某客户端发的消息后，给所有人群发一遍即可
    io.emit('textmsg', data)   
  })
});
// io.on() 用于监听websocket事件   connection为连接建立成功事件
// 一旦客户端向服务端发送请求建立连接，连接建立成功后将触发该事件，
// 将立即执行第二个参数：回调方法
server.listen(3000, () => {
    
    
  console.log('websocket服务已启动，正在监听 *:3000');
});
// 监听端口

それからサービスを開始します

node app.js
// 这个app.js是我创建的js文件命名

以下の図に示すように
ここに画像の説明を挿入
フロントエンドページの構築
フロントエンド HTML ページを作成します

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Socket.io</title>
	</head>
	<body>
        <script src="./scripts/socket.io.js">

        </script>
        <script></script>
    </body>
</html>

このエラーが発生した場合、それはクロスドメインエラーです。
ここに画像の説明を挿入