Open3
webSocketを触ってみる
harutiro参考記事
socket通信でないと行けない理由・postで送信だけでもやればよかった話
通信の図
l
socket通信の全般を知る
honoでの実装方法
reactでの実装方法
harutiroviteでの実装方法
クライアントの受信コード
export function sendMessage(message: string) {
const socket = io('ws://127.0.0.1:8000', { path: '/ws' })
socket.on("connect", () => {
console.log(`socket.connectを出力`);
console.log(socket.connect()); // サーバに接続できたかどうかを表示
});
socket.emit("chat message", message);
socket.on("chat message", (msg: string) => {
console.log(`chat messageを出力`);
console.log(msg);
});
}
honoでの実装方法
サーバー側
const server = serve({
fetch: app.fetch,
port: 8000,
})
const ioServer = new Server(server as HttpServer, {
path: '/ws',
serveClient: false,
cors: {
origin: '*',
},
})
ioServer.on('error', (err) => {
console.log(err)
})
ioServer.on('connection', (socket) => {
console.log('client connected')
socket.on('chat message', (msg) => {
ioServer.emit('chat message', msg)
})
})