WebSocketの概要と基本的な使い方

ウェブソケット

HTTP プロトコルと同じネットワーク通信プロトコルです。

WebSocket が必要な理由は何ですか?

HTTP プロトコルには欠陥があるため、通信はクライアントによってのみ開始できます。

WebSocket APIの意味を理解する

ネイティブ WebSocket に基づいてサーバーとクライアント間の通信を完了します

//  new WebSocket是一个内置的js对象，服务端的通讯地址放在WebSocket构造函数里
// wss是加密的WebSocket协议，类似https
// 建立连接
var ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello");

// 监听连接成功
ws.onopen = function(evt) { 
  console.log("连接成功 ...");
  // 向服务端发消息
  ws.send("Hello WebSockets!");
};

// 接收服务端回的消息
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  // 客户端主动关闭通讯
  ws.close();
};

// 服务端主动关闭通讯
ws.onclose = function(evt) {
  console.log("连接关闭");
};

ソケット.io

クライアント/サーバー通信ビジネスを行う場合、フロントエンドおよびバックエンドのインスタントメッセージングソリューションであるソケット.ioを使用できます。

ソケット.io とは何ですか？

socket.io は、WebSocket ベースの CS (クライアント/サーバー) リアルタイム通信ライブラリです。
バックエンドでインスタントメッセージングサービスを提供するために使用します。
また、フロントエンドでsocket.io によって作成されたサービスをリンクできるjsライブラリも提供します。
概要: WebSocket フロントエンドとバックエンドに基づくインスタントメッセージングソリューションのセットです

ソケット.ioの使い方は？

この公式デモを体験できます (公式デモを体験すると、接続を確立するときに cors クロスドメインの問題が発生します。サーバー側のデモコードで cors を有効にし、index.js ファイルに cors:true を追加する必要があります)。

const io = require('socket.io')(http,{cors:true})

ソケット.io-クライアント

クライアントjsライブラリの使い方は？

ソケット.ioクライアントをダウンロード

pnpm add socket.io-client

接続を確立するにはどうすればよいですか? io関数を介してサーバーのアドレスを渡します

import io from 'socket.io-client'
// 参数1：不传默认是当前服务域名，开发中传入服务器地址
// 参数2：配置参数，根据需要再来介绍
const socket = io('http://localhost:3000')

接続が成功したことを確認するにはどうすればよいですか?

socket.on('connect', () => {
  // 建立连接成功
  console.log('连接成功)
  // 发送消息
  socket.emit('chat message', '消息内容')
})

メッセージを送信するにはどうすればよいですか?

// chat message 发送消息事件，由后台约定，可变
socket.emit('chat message', '消息内容')

メッセージを受信するにはどうすればよいですか?

// chat message 接收消息事件，由后台约定，可变
socket.on('chat message', (msg) => {
  // msg 是服务器发送的消息,服务器会把你发的消息返回给你
  console.log(msg)
  // 关闭连接
  socket.close()
})

接続を閉じるにはどうすればよいですか?

// 离开组件需要使用
socket.close()

接続が閉じられた後、イベント切断がトリガーされます

// 连接关闭后触发
socket.on('disconnect', (msg) => {
  console.log('连接关闭')
})

接続が失敗するとエラーイベントがトリガーされます

  socket.on('error', () => {
    console.log('连接失败')
  })

フロントエンドプロジェクトにインスタントメッセージングコードを実装するには、socket.io-clientを使用します。

ダウンロードインポート

// 导入socket 类型
import io, { Socket } from 'socket.io-client'

// 声明一个全局变量socket 方便多处引用
let socket: Socket

onMounted(() => {
// 初始化io时传入authToken做身份认证---没有登录不能聊天，
// 传入当前问诊的订单id---才能把用户和用户的医生放在同一个房间里
  socket = io(baseURL, {
    auth: {
      token: `Bearer ${store.user?.token}`
    },
    query: {
      id: store.user?.id
    }
  }

  socket.on('connect', () => {
    console.log('连接成功')
  })

  socket.on('disconnect', () => {
    console.log('连接关闭')
  })

  socket.on('error', () => {
    console.log('连接失败')
  })
})

// 组件销毁时断开连接
onUnmounted(() => {
  socket.close()
})

ここで、メッセージの受信とチャットの取得のいくつかのイベントは通信ルールであり、通信ルールは合意されたインターフェースルールを参照する必要があります。

chatMsgList チャット履歴を受信する

sendChatMsg メッセージを送ります

receiveChatMsg メッセージを受信する

updateMsgStatus メッセージが読まれました

getChatMsgList チャット履歴を取得する

statusChange 注文ステータスの変更を受け取る