最初webをホスティングする部分で結構時間がとられてしまいました。
やってることは簡単ですが、初めてはなんでも時間がかかってしまいますね、(笑)
const express = require("express");
const app = express();
var http = require('http').createServer(app);
const io = require('socket.io')(http);
http.listen(8080, function () {
console.log('Express is running on port 80');
});
// ルーティングの設定
app.get("/", (req, res) =>{
res.sendFile(`${__dirname}/public/index.html`);
console.log("webApi/indexへアクセスがありました");
});
public index.html の部分は自分の好きなディレクトリにしましょう。
__dirnameの次は、同階層のフォルダの名前で、index.html に場所にパスを通しています
この場合、ポート番号8080ポートでサーバーをホスティングしているということです
CSS ファイルや JavaScript ファイルもパスを通してあげる必要があります。
ルーティング設定の所のスラッシュだけだと、どこにアクセスしても
index.html にアクセスするということです。
思ったより簡単でしょう。
次から socket.ioというライブラリを使用して、
サーバーサイド側とクライアント側でデータを通信してみます。
io.sockets.on( 'connection', function (socket) {
socket.on('connection2', function ( data ) {
sockets.emit("key",data); 全クライアント送信
socket.broadcast.emit("connection2", data); 送信元以外に送信
//roomに関しては、各自で調べてください。名前のまんまですが(笑)
socket.join('roomKey'); roomに入る
socket.leave('room'); roomから出る
socket.broadcast.to(id).emit("connection2", data); roomに入っている人で送信元以外に送信
socket.to(id).emit("connection2", data); roomに入っている人全員に送信
});
});
先ほどのソースコードに、こちらのソースコードを追加してみてください。
const socket = io();
socket.emit("roomConnect","コネクトしたよ!!");
こちらのソースコードはクライアント側から、
サーバーサイド側にデータを送るためのコードです。
データを送信するための、ボタンや処理にコピペしてください。
送信するためにはemit.を利用します。
こちらでは、roomConnectというキーを使い、送信しています。
簡単ですよね。(笑)
今回、socket.ioとWeb Speech Apiを利用して、
議事録を作成するサイトを作成しましたので、こちらに上げます。
下記(memeFile)からダウンロードしてください。
名前は、Meme(ミーム)といいます。
モジュールはpackage.jsonを見て、自分で入れてください。
memeFile