前の記事では、npm で最も人気のある WebSocket ライブラリの 1 つである ws ライブラリについて説明しましたので、この記事では別のライブラリであるsocket.io ライブラリについて説明します。Socket.io は実際には互換性のあるソリューションです。ブラウザがH5に対応していないこの状況では前回の記事で紹介したWebSocketが使えず、他の解決策を使うしかありませんが、ブラウザの互換性をsocket.ioで解決します。

ノードはソケット通信を実装 | WebSocket 通信 - ブラウザーのネイティブサポート

Socket.io ライブラリのアドレス: Socket.IO

サーバーとクライアント間の通信を実現するために、socket.io ライブラリを使用してみましょう。

Socket.io の紹介

CMD コマンドウィンドウを開き、決定するディレクトリに切り替え、次のコマンドを使用してソケット.io ライブラリをインストールします。

npm i socket.io

インストールが完了したら、node_modules からsocket.io.js ファイルを見つけるだけで済みます。パスは次のとおりです: (後で使用します)

/node_modules/socket.io/client-dist/socket.io.js

- クライアント

ここのクライアントインターフェースは先ほど使用したhtmlファイルをそのまま使用しており、scriptタグを使用してsocket.ios.jsをインポートしてサーバーインターフェースに接続していますが、ここではhtmlファイルと混同しないように分離してスクリプトを使用しています。タグ紹介;

SocketIO.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>Document</title>
    <script src="./socket.io.js" type="text/javascript"></script>
    <script src="./SocketIOClient.js"></script>
    <style>
        .chatroom{
            height: 400px;
            width: 220px;
            border: 1px solid blue;
            padding: 5px;
            overflow: scroll;
        }
        .footer{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h3>Socket.IO 客户端</h3>
    <div id="chatroom" class="chatroom"></div>
    <div class="footer">
        <input type="text" name="sayinput" id="sayinput" value="" />
        <input type="button" name="send" id="sendbutton" value="发送" />
    </div>
</body>
</html>

SocketIOClient.js ファイル - サーバーへのアクセス

var iosocket = null
window.onload = function () {
    // 连接
    iosocket = io.connect('http://127.0.0.1:9000')
    iosocket.on('connect',function(){
        iosocket.send('— — 已上线 — —')
    }) 
    // 收集
    iosocket.on('message',function(message){
        var chatroom = document.querySelector('#chatroom');
        chatroom.innerHTML += '<br/>' + message
    })
    // 关闭
    iosocket.on('disconnect',function(){
        console.log('服务器关闭');
    })
    // 发送
    function send(){
        iosocket.send(sayinput.value)
        sayinput.value = ''
    }
    // 回车
    document.onkeyup = function (event) {
        if (event.key = '13'){
            send()
        }
    }
    // 按钮
    sendbutton.onclick = function () {
        send()
    }
}

前述した WebSocket の内容や一部の操作と大きな違いはないため、ここでは詳しく説明しません。

-- サーバー

Express フレームワークをインストールする

ソケット.ioの紹介

var socket = require('socket.io')

// 服务端
// var app = require('express')()
var express = require('express')
var app = express()
var http = require('http').Server(app)
// var socket = require('socket.io')
// var io = socket(http)
var io = require('socket.io')(http)
var fs = require('fs');

app.get('/', function (req, res) {
  function callback(data) {
    res.send(data.toString())
  }
  fs.readFile('./SocketIo.html', function (err, data) {
    if (err) {
      console.log(err);
      callback('文件不存在')
    } else {
      callback(data)
    }
  })
})

// socket.io设置
// 在线用户
var onlineUsers = {}

var i = 0

io.on('connection', function (socket) {
  console.log('有人连上来了~');
  //监听新用户的加入
  socket.name = '用户' + ++i
  onlineUsers[socket.name] = socket

  // 监听用户退出
  socket.on('disconnect', function () {
    console.log('有人退出');
    delete onlineUsers[socket.name]
  })

  // 监听用户发布聊天内容
  socket.on('message', function (msg) {
    broadcast(msg, socket)
  })
})

function broadcast(msg, socket) {
  for (var key in onlineUsers) {
    onlineUsers[key].send(socket.name + ' : ' + msg)
  }
}

http.listen(9000, function () {
  console.log('Port:9000 | Running ...');
})

上記の記述の何が問題なのか、テストしてみましょう。

サーバーは正常に動作しています。クライアントを見てみましょう。ブラウザから http://127.0.0.1:9000 にアクセスすると、クライアントの Web ページの HTML ファイル (./SocketIO.html) が表示されます。

ホスティングに静的リソースを使用できます。つまり、パブリックフォルダーを作成し、このフォルダーの下に管理ファイルを配置し、次のコマンドを使用します。

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

または、次のようにアクセスするように app.get('/...') を設定することもできます。

app.get('/SocketIOClient.js',function(req,res){
  fs.readFile('./public/SocketIOClient.js',(err,data)=>{
    res.send(data)
  })
})
app.get('/socket.io.js',function(req,res){
  fs.readFile('./public/socket.io.js',(err,data)=>{
    res.send(data)
  })
})

script标签
    <script src="./socket.io.js" type="text/javascript"></script>
    <script src="./SocketIOClient.js"></script>

ここで注意する必要があるのは、このスクリプトのリクエストパスです。静的リソースホスティングについては以前に説明しました。戻ってその話を読んでください。テストしてみましょう:

次に、クライアントを起動してユーザー 2 をオンラインにします。

情報を個別に送信するには:

以上がこの記事の全内容です、よろしくお願いします！最後に理解できない完全なコードが添付されている場合は、対応する依存パッケージ (express およびソケット.io) を自分でダウンロードする必要があることに注意してください。

// var app = require('express')()
var express = require('express')
var app = express()
// var http = require('http')
// var server = http.Server(app) 
var server = require('http').Server(app)
// var socket = require('socket.io')
// var io = socket(http)
var io = require('socket.io')(server)
var fs = require('fs');

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

app.get('/', function (req, res) {
  function callback(data) {
    res.send(data.toString())
  }
  fs.readFile('./SocketIo.html', function (err, data) {
    if (err) {
      console.log(err);
      callback('文件不存在')
    } else {
      callback(data)
    }
  })
})

app.get('/SocketIOClient.js',function(req,res){
  fs.readFile('./public/SocketIOClient.js',(err,data)=>{
    res.send(data)
  })
})
app.get('/socket.io.js',function(req,res){
  fs.readFile('./public/socket.io.js',(err,data)=>{
    res.send(data)
  })
})

// socket.io设置
// 在线用户
var onlineUsers = {}

var i = 0

io.on('connection', function (socket) {
  console.log('有人连上来了~');
  //监听新用户的加入
  socket.name = '用户' + ++i
  onlineUsers[socket.name] = socket

  // 监听用户退出
  socket.on('disconnect', function () {
    console.log('有人退出');
    delete onlineUsers[socket.name]
  })

  // 监听用户发布聊天内容
  socket.on('message', function (msg) {
    broadcast(msg, socket)
  })
})

function broadcast(msg, socket) {
  for (var key in onlineUsers) {
    onlineUsers[key].send(socket.name + ' : ' + msg)
  }
}

server.listen(9000, function () {
  console.log('Port:9000 | Running ...');
})

socket.io はブラウザの互換性を解決します (WebSocket)

Socket.io の紹介

- クライアント

-- サーバー

おすすめ