[TIL] 210708

今回の深化週間は基礎週より少し多いが、基本CRUDは1日早く終了した.教室でsocket.ioを通したリマインダ機能を紹介していたので、これに対してちょっと探して、またチャット機能を作ることができると言って、チャレンジしてみました.
最初はどのように働いているのかよく分からなかったので、いろいろな実験をして、それからsocket.Emit(送信済み)とsocket.私はon(受け入れ)で活動を聞いて起動することを良いティキタカの概念と理解しています.

-------🖥️ Frontend-------

📂 アラーム機能

まずフロントでioを入力connectを使用して「/」(ポート3000)サーバに接続し、イベントの発生を待機します.順番に説明すると、

書き込みボタンにonclick="postToServer()"

と書きます

書き込みボタンを押すと、「POST」というデータがサーバに送信される.発射する.

は、次いで、「POST」という名前のイベントを受信するソケットをサーバ上で待機する.io

受信
socketは

のデータを受信する.メールでフロントに渡します.

フロントにてデータ

を再生する.

const socket = io.connect('/');

function postToServer(user, data) {
  socket.emit('posting', {
    nickname: user.nickname,
    channel: data.channel,
    title: data.title,
  });
}
socket.on('postingAlarm', function (data) {
  const { nickname, channel, title, date } = data;
  makePostNotification(nickname, channel, title, date);
});

function makePostNotification(targetNickname, channel, title, date) {
  const messageHtml = `<span class="alertMessage"> > <a style="color:yellow">${targetNickname}<a/>님이 방금 
  <a href="/${channel}" style="color: rgb(229, 33, 255); text-transform: uppercase;">${channel}</a>채널에 
  "${title}" 라는 새게시물을 작성했습니다.<br /><small>(${date})</small></span><br>`;
  const alt = $('#alertBox');
  if (alt.length) {
    alt.append(messageHtml);
  } else {
    return;
  }
}

📂 チャット機能

1:1チャットグループを作成する時間が足りません.基本的なemitとonチャット一言で言えば、人々が一つの部屋に集まっておしゃべりをする空間です.

転送ボタン(写真には表示されていませんが)を押すと、msgToServer関数を実行できます.

ソケット.メールで情報を書くユーザー情報とコンテンツを送信します.

サーバでsocketを使用します.それをONで受けてまたソケットでemit加工データで送ります.

フロントコンセントから.ONでまた迎えに来てみんなに見せて

function msgToServer() {		
  let message1 = $('#putMessage').val();
  if (message1 == '') {
    return;
  }
  socket.emit('chatMessage', { message1, user });
}

socket.on('receiveMsg', function (data) {
  showMessage(data);
});

function showMessage(data) {
  let msgHtml = `<span style="color: white;">>..${data['nickname']}님: ${data['sendMsg']} (${data['date']})</span><br>`;
  $('#chats').append(msgHtml);
  $('#putMessage').val('');
}

-------⚙️ Backend-------

まずはコンセントioはexpress内で実行されないので、両方ともhttpで保護します.だからまずセットをnpmにダウンロードします.

npm install socket.io -S

上からみんなに歌ってあげる

const socketIo = require('socket.io');
const Http = require('http');
const io = socketIo(http);

📂 アラーム機能

そしてさっきもsocketって言ってたけどONならそれを今のビジュアルと一緒にソケットに加工しますemitを返します.

io.on('connection', (socket) => {
  const currentDate = moment().format('YYYY-MM-DD HH:mm:ss');

  socket.on('posting', (data) => {
    const payload = {
      nickname: data.nickname,
      channel: data.channel,
      title: data.title,
      date: currentDate,
    };
    io.emit('postingAlarm', payload);
  });

📂 チャット機能

  socket.on('chatMessage', (data) => {
    const msg = {
      sendMsg: data.message1,
      nickname: data.user1.nickname,
      date: currentDate,
    };
    io.emit('receiveMsg', msg);
  });
});