常連

## テーマ、知りたいこと

ローカル間でのソケット通信にもセキュリティ対策（暗号化）が必要か？

## 背景、状況

ローカル間でのソケット通信を行っています
複数台のクライアント(ハンディーターミナル)からサーバーPC(DBはsqlite)に情報問合・返信するシステムを構築運用しています

コード自体はネット情報を元に非同期で動くサーバープログラムを組んでいます

※特段プログラム関連の教育を受けた訳でなく、自己学習で組んでいます

既に運用中ですが、今回、改良をしないといけない部分があり、作業を実施しています
ついでに他の部分でも修正しようかと思って勉強しています

その中で通信のセキュリティが何もしていないので対策をとった方がいいのかと思っています
現在、特段、暗号化などのセキュリティ対策はしていません

まだ勉強中ですが、通常、プロの方ならSSL通信などにするのが普通でしょうか？
ローカル間なら必要無いって感じでしょうか？

サーバーPC(DBはsqlite)といってもこれはインターネットには繋がっていますので
完全なクローズなネットワークではありません



ローカル間でのソケット通信のセキュリティについて

C言語のソケットプログラムについて送受信の部分について質問いたします

たとえば送信したいものが
実行処理のタイプ(char)
int 変数何個か(charによりいくつ送信するか変わります)
文字列配列(可変長)

だった場合送受信の部分は簡易コードで書くと
送信側
send(socket,char , sizeogf(char),0)

send(socket,int , sizeogf(int),0)
send(socket,int , sizeogf(int),0)
....
send(socket,int , sizeogf(int),0)

send(送信する文字列配列のサイズをintで送信,sizeof(int) )
for loop
send(文字列送信)

受信側
recv(soc,char,sizeof(char),0)
swithch で分岐して
recv(int ,sizeof(int))
recv(int ,sizeof(int))
......
recv(int ,sizeof(int))

recv(可変長文字列のサイズを受信)
bufを用意
recv(buf,sizeof(buf))




のような形で書くのがいいのでしょうか？
それとも, なにか決まりがあるのでしょうか？
たとえばchar型の文字列につめて一気に送信するとか.. 


このジャンルのプログラムを組む機会があまりなかったので困っています、お力をお貸しください

ソケットプログラムでの送信側と受信側でのプログラミング方法について

### 実現したいこと

- [JPEG画像ファイルをSocket.IOを用いて送信できるようにしたいです ] 

### 前提

　Node.jsでSocket.IOを利用してチャットルームのようなものを作成しています。
　チャットルームでは画像を送信するとリアルタイムに全ユーザーにその画像が送られて表示できるようにしたいです。

　PNG画像で上記機能を満たすことは出来たのですが、JPEG画像を送信しようとすると表示されません。
　PNG画像の場合はできて、JPEG画像の場合に出来ないのが理解できず、解決策をネットで調べましたがよくわかりませんでした。

　お手数おかけし申し訳ございませんが、どうすればいいのかご教授願えますと幸いです。

### 発生している問題・エラーメッセージ

　JPEG画像を送信すると、何も表示されない。

### 該当のソースコード

app.js(サーバ側の処理)
```javascript
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.Server(app);
const io = socketIo(server);

const PORT = 3000;

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

server.listen(PORT, () => {
  console.log(`listening on port ${PORT}`);
});

io.on('connection', (socket) => {
  console.log('user connected');
  socket.on('sendMessage', (message) => {
    console.log('Message has been sent: ', message);

    io.emit('receiveMessage', message);
  });
});

io.sockets.on( 'connection', function (socket) {

    socket.on( 'image', function ( imageData ) {
        console.log('TEST');
      
      io.emit('image', imageData);

    });
   
  });
```

index.html(クライアント側の処理)
```html
<html>
<head>
    <script src="/socket.io/socket.io.js"></script>
    
</head>  

<body>
    <h1>simple chat</h1>
    <input id="inputText" type="text">
    <input id="sendButton" type="submit">
    <ul id="messageList" />

    <form action="" name="form">
        <input id="file" type="file">
    </form>
    <div id="display">
    </div>

    <canvas id="canvas" width="300" height="300">
        キャンバスの表示内容を説明する代替テキストです。
    </canvas>

    <script>
            alert("test");
    
    const socket = io();

      const clearText = () => {
        document.getElementById('inputText').value = '';
      }

      const addMessageList = (message) => {
        const ul = document.getElementById('messageList');
        const li = document.createElement('li');
        const text = document.createTextNode(message);
        li.appendChild(text);
        ul.appendChild(li);
      };

      document.getElementById('sendButton').addEventListener('click', () => {
        let inputMessage = document.getElementById('inputText').value;

        if (inputMessage === '') {
          return;
        }

        socket.emit('sendMessage', inputMessage);
        clearText();
      });

      socket.on('receiveMessage', (message) => {
        addMessageList(message);
      });

      socket.on( 'connect', function () {
 
        // サーバから送られた画像を受け取って表示
        socket.on( 'image', function( imageData ) {
        if ( imageData ) {
            alert("test2");

            var canvas = document.createElement( 'canvas' );
            var ctx = canvas.getContext( '2d' );
            var img = new Image();
            img.src = imageData;
            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height
                ctx.drawImage( img, 0, 0);
                document.body.appendChild( canvas );
            }
        }
        });

    });

    // 相手ブラウザに画像を送る
    function sendImage( event ) {

        const canvas = document.getElementById("canvas");        
        var ctx = canvas.getContext('2d'); 
        var reader = new FileReader();
        var file = event.target.files[0];

        reader.onload = function( event ) {

            var img = new Image();
            
            img.onload = function() {              
                canvas.width  = img.naturalWidth; 
                canvas.height = img.naturalHeight; 
                ctx.drawImage(img, 0, 0);     
            }                                       
            img.src = event.target.result;  
         
            socket.emit( 'image', event.target.result );

        };
        reader.readAsDataURL( file );
    }

    var file = document.getElementById( 'file' );
    file.addEventListener( 'change', sendImage, false );
    
    </script>

  </body>
</html>
```
### 試したこと

toDataURLというメソッドを使うのかな？と思ったのですが、
色々試しましたが上手くいきませんでした。

### 補足情報（FW/ツールのバージョンなど）
Node.js / v14.18.1
Express / 4.19.2
Socket.IO / 4.7.5 


Socket.IOでJPEG画像が送れない

```lang-javascript
$(window).on('beforeunload', function() {
    return '移動していいですか？';
});
```
これだと移動する前にしか処理できなくて

```lang-javascript
$(window).unload(function() {
    alert('ページ移動');
});
```
これはうまく動かなかったんですが、
ページ移動するときに処理するにはどうしたらいですか？




-----追記--------

node.jsでゲームの開発をしています。

一対一の対戦で、ページを抜けたら抜けたプレイヤーは負けて、相手に勝利の告知をさせたいと考えています。

server側
```lang-javascript
socket.on('lose', function(data){
	socket.to(otherPlayer_id).emit('win');
	//勝敗による得点の計算
});
```

client側
```lang-javascript
socket.on('win', function(){
	//勝利時の画面処理
});

$(window).bind("beforeunload", function() {
	return ページを抜けたら勝負に負けます。よろしいですか？
});

function lose(){
	sokcet.emit('lose', data);
}
```

プレーヤーがページから離れようとして、「ページを離れる」ボタンを押した時に関数loseを実行したいと思っています。良い方法ありませんか？

ページ移動後に処理がしたい

Windowsパソコン（サーバー）とRaspberryPi（クライアント）間でpythonによるsocket通信を行いたいです。データは5メガバイトほどです。Windowsパソコンはanacondaのspyderを使っています。プログラムを書いてみました。サーバーのプログラムのwhile文の抜け出し方を教えてください。違った通信方法でオススメ、簡単なものもあれば教えてください。
```ここに言語を入力
# -*- coding: utf-8 -*-
#サーバー
import socket
def main():
    soc = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    soc.bind(("******", ******)) #ホストとポートは隠します
    soc.listen(1)
    soc, addr = soc.accept()
    data_sum = ''
    while True:
        data = soc.recv(1024) #1024バイトづつ分割して受信する
        data_sum = data_sum + data #受信した分だけ足していく
        if データを全て受信したらTrue: #どのようにデータを全て受信したかどうか判断すればよいか分からない
            break
    print data_sum #受信したデータを表示

if __name__ == '__main__':
    main()
```
```ここに言語を入力
# -*- coding: utf-8 -*-
#クライアント
import socket
def main():
	soc = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
	soc.connect(("******", ******)) #ホストとポートは隠します
	data = 'a' * 1024 * 1024 * 5 #5メガバイトのデータを生成
	soc.send(data) #5メガバイトのデータを送信

if __name__ == '__main__':
	main()

```

pythonでsocket通信を行い、大きいデータを送受信したい

### 実現したいこと

作ったアプリをrailwaysでデプロイさせて、リリースさせたい。

### 前提

Next.js 13、React、Socket.io、Prisma、Tailwind、MySQLでアプリを作っています。そのアプリをrailwaysでデプロイしようとしたら、以下のようなエラーメッセージが出ました。

### 発生している問題・エラーメッセージ
```railways
38.42 ./components/chat/chat-messages.tsx:130:50

38.42 Type error: Property 'deleted' does not exist on type 'MessageWithMemberWithProfile'. Did you mean 'delete'?

38.42

38.42   128 |                                 content={message.content}

38.42   129 |                                 fileUrl={message.fileUrl}

38.42 > 130 |                                 deleted={message.deleted}

38.42       |                                                  ^

38.42   131 |                                 timestamp={format(new Date(message.createdAt), DATE_FORMAT)}

38.42   132 |                                 isUpdated={message.updatedAt !== message.createdAt}

38.42   133 |                                 socketUrl={socketUrl}

-----

 

Dockerfile:24

-------------------

22 |     # build phase

23 |     COPY . /app/.

24 | >>> RUN --mount=type=cache,id=s/324baff0-adff-4882-ba91-aef6e6037b62-next/cache,target=/app/.next/cache --mount=type=cache,id=s/324baff0-adff-4882-ba91-aef6e6037b62-node_modules/cache,target=/app/node_modules/.cache npm run build

25 |

26 |

-------------------

ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1

 

Error: Docker build failed
エラーメッセージ
```

### 該当のソースコード

```React
"use client";

import { Fragment, useRef, ElementRef } from "react";
import { format } from "date-fns";
import { Member, Message, Profile } from "@prisma/client";
import { Loader2, ServerCrash } from "lucide-react";

import { useChatQuery } from "@/hooks/use-chat-query";
import { useChatSocket } from "@/hooks/use-chat-socket";

import { ChatWelcome } from "./chat-welcome";
import { ChatItem } from "./chat-item";
import { useChatScroll } from "@/hooks/use-chat-scroll";

const DATE_FORMAT = "d MMM yyyy, HH:mm";

type MessageWithMemberWithProfile = Message & {
    member: Member & {
        profile: Profile
    }
}

interface ChatMessagesProps {
    name: string;
    member: Member
    chatId: string;
    apiUrl: string;
    socketUrl: string;
    socketQuery: Record<string, string>;
    paramKey: "channelId" | "conversationId";
    paramValue: string;
    type: "channel" | "conversation";
}

export const ChatMessages = ({
    name,
    member,
    chatId,
    apiUrl,
    socketUrl,
    socketQuery,
    paramKey,
    paramValue,
    type,
}: ChatMessagesProps) => {
    const queryKey = `chat:${chatId}`;
    const addKey = `chat:${chatId}:messages`;
    const updateKey = `chat:${chatId}:messages:update`

    const chatRef = useRef<ElementRef<"div">>(null);
    const bottomRef = useRef<ElementRef<"div">>(null);

    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetchingNextPage,
        status,
    } = useChatQuery({
        queryKey,
        apiUrl,
        paramKey,
        paramValue,
    });
    useChatSocket({ queryKey, addKey, updateKey });
    useChatScroll({
        chatRef,
        bottomRef,
        loadMore: fetchNextPage,
        shouldLoadMore: !isFetchingNextPage && !!hasNextPage,
        count: data?.pages?.[0]?.items?.length ?? 0,
    })

    if (status === "loading") {
        return (
            <div className="flex flex-col flex-1 justify-center items-center">
                 <Loader2 className="h-7 w-7 text-zinc-500 animate-spin my-4" />
                 <p className="text-xs text-zinc-500 dark:text-zinc-400">
                    Loading messages...
                 </p>
            </div>
        )
    }

    if (status === "error") {
        return (
            <div className="flex flex-col flex-1 justify-center items-center">
                 <ServerCrash className="h-7 w-7 text-zinc-500 my-4" />
                 <p className="text-xs text-zinc-500 dark:text-zinc-400">
                    Something went wrong!
                 </p>
            </div>
        )
    }

    return (
        <div ref={chatRef} className="flex-1 flex flex-col py-4 overflow-y-auto">
            {!hasNextPage && <div className="flex-1" />}
            {!hasNextPage && (
                <ChatWelcome
                    type={type}
                    name={name}
                />
            )}
            {hasNextPage && (
                <div className="flex justify-center">
                    {isFetchingNextPage ? (
                        <Loader2 className="h-6 w-6 text-zinc-500 animate-spin my-4" />
                    ) : (
                        <button
                        onClick={() => fetchNextPage()}
                            className="text-zinc-500 hover:text-zinc-600 dark:text-zinc-400 text-xs my-4 dark:hover:text-zinc-300 transition"
                        >
                            Load previous messages
                        </button>
                    )}
                </div>
            )}
            <div className="flex flex-col-reverse mt-auto">
                {data?.pages?.map((group, i) => (
                    <Fragment key={i}>
                        {group.items.map((message: MessageWithMemberWithProfile) => (
                            <ChatItem 
                                key={message.id}
                                id={message.id}
                                currentMember={member}
                                member={message.member}
                                content={message.content}
                                fileUrl={message.fileUrl}
                                deleted={message.deleted}//ここにエラーが生じているようです。
                                timestamp={format(new Date(message.createdAt), DATE_FORMAT)}
                                isUpdated={message.updatedAt !== message.createdAt}
                                socketUrl={socketUrl}
                                socketQuery={socketQuery}
                            />
                        ))}
                    </Fragment>
                ))}
            </div>
            <div ref={bottomRef} />
        </div>
    )
}
```

### 試したこと

エラー文の通りにdeletedをdeleteに変更してみたりしましたが、今度はテキストエディタの方にエラーがでたのでこの方法も違うようです。他にも、firebaseでデプロイしてみましたが、やはり同じ場所でエラーを吐いてしまったので根本を直さない限りデプロイ出来ない事も判明しました。
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
該当のエラー文のみだけでは解決が難しい可能性もあるので、以下に該当のアプリのソースコードを公開してあるものを添付しますので、恐縮ですがこちらも見ていただきながら解決をお願いします。
https://github.com/yoshihitoishihara/discord-clone

railwayでデプロイしようとしたらエラーが出ました

### C言語でUDP通信を実現する（使用機器:P8X32AとW5200、開発環境:SimpleIDE）
現在、添付いたしましたファイルのようにUDP通信プログラムを作成しているのですが、
エラーがなかなか取れません。
[作成したプログラムのZIPファイルへのリンク](https://drive.google.com/file/d/15lpRaOo4jUhdvDjfJt5lxRJy_IEo3pGc/view?usp=sharing)

かなり代表的なエラーではあるのですが、
インクルードしたヘッダファイル(w5200.h)で定義しておりますので、
何が原因かなかなか見つけられておりません。

♦使用しているコード
loopback.c（下に記載）
loopback.h
socket.c
socket.h
w5200.c
w5200.h
wizchip_conf.c
wizchip_conf.h
**__**＊ソースコードが長いため、記載できない部分につきましては下にまとめました。
[作成したプログラムのZIPファイルへのリンク](https://drive.google.com/file/d/15lpRaOo4jUhdvDjfJt5lxRJy_IEo3pGc/view?usp=sharing)**__**




### 発生している問題・エラーメッセージ
```


SimpleIDE Version 1.1.2

propeller-elf-gcc.exe -v GCC 4.6.1 (propellergcc_v1_0_0_2408)
propeller-elf-gcc.exe -I . -L . -Os -mcmm -m32bit-doubles -fno-exceptions -std=c99 -c loopback.c -o cmm/loopback.o
loopback.c: In function 'loopback_udps':
loopback.c:17:4: warning: implicit declaration of function 'getSn_SR' [-Wimplicit-function-declaration]
loopback.c:19:12: error: 'SOCK_UDP' undeclared (first use in this function)
loopback.c:19:12: note: each undeclared identifier is reported only once for each function it appears in
loopback.c:20:10: warning: implicit declaration of function 'getSn_RX_RSR' [-Wimplicit-function-declaration]
loopback.c:47:12: error: 'SOCK_CLOSED' undeclared (first use in this function)
loopback.c:51:31: error: 'Sn_MR_UDP' undeclared (first use in this function)
Done. Build Failed!

Click error or warning messages above to debug.


```

### loopback.c

```c
#include <stdio.h>
#include "loopback.h"
#include "socket.h"
#include "w5200.h"
#include "wizchip_conf.h"

#if LOOPBACK_MODE == LOOPBACK_MAIN_NOBLCOK


int32_t loopback_udps(uint8_t sn, uint8_t* buf, uint16_t port)
{
   int32_t  ret;
   uint16_t size, sentsize;
   uint8_t  destip[4];
   uint16_t destport;

   switch(getSn_SR(sn))
   {
      case SOCK_UDP :
         if((size = getSn_RX_RSR(sn)) > 0)
         {
            if(size > DATA_BUF_SIZE) size = DATA_BUF_SIZE;
            ret = recvfrom(sn, buf, size, destip, (uint16_t*)&destport);
            if(ret <= 0)
            {
#ifdef _LOOPBACK_DEBUG_
               printf("%d: recvfrom error. %ld\r\n",sn,ret);
#endif
               return ret;
            }
            size = (uint16_t) ret;
            sentsize = 0;
            while(sentsize != size)
            {
               ret = sendto(sn, buf+sentsize, size-sentsize, destip, destport);
               if(ret < 0)
               {
#ifdef _LOOPBACK_DEBUG_
                  printf("%d: sendto error. %ld\r\n",sn,ret);
#endif
                  return ret;
               }
               sentsize += ret; // Don't care SOCKERR_BUSY, because it is zero.
            }
         }
         break;
      case SOCK_CLOSED:
#ifdef _LOOPBACK_DEBUG_
         //printf("%d:UDP loopback start\r\n",sn);
#endif
         if((ret = socket(sn, Sn_MR_UDP, port, 0x00)) != sn)
            return ret;
#ifdef _LOOPBACK_DEBUG_
         printf("%d:Opened, UDP loopback, port [%d]\r\n", sn, port);
#endif
         break;
      default :
         break;
   }
   return 1;
}

#endif

```


### 試したこと
エラーに関して参考にしたサイトに以下のものがあり、そのまま試しましたがエラーに変化はありませんでした。
[C言語でMakefileの実行時、インクルードしているはずの変数が"undeclared"となる原因](http://teratail.com/questions/59158)
もしかしたら、この上記のサイトに記載されていることを理解しきれてないのかもしれません


### 補足情報（使用機器、開発環境、参考にしたURL）
♦使用機器
WIZnet W5200 for QuickStart (#40002) 
Propeller QuickStart (#40000)

♦IDE
simpleIDE

また、以下に参考にしたサイトを挙げておきます。
♦プログラムを作成するうえで参考にしたサイト＊今回使用しているのはW5200 
[W5500 UDPサーバーへのデータ送信](https://forum.wiznet.io/t/topic/2703)
[WIZnet ioLibrary](https://github.com/Wiznet/ioLibrary_Driver)
[W5500 UDP機能](http://wizwiki.net/wiki/doku.php?id=products:w5500:application:udp_function)
♦エラーに関して参考にしたサイト
[C言語でMakefileの実行時、インクルードしているはずの変数が"undeclared"となる原因](http://teratail.com/questions/59158)

undeclared (first use in this function)のエラーが＃defineしているのに取れない！

### 前提・実現したいこと

C++で下記の図のように同一LAN内にServerと複数台のClientを作り、TCPのSocketで通信したいと思っています。
双方で文字列を送受信できるようにしたいです。
送受信するデータは下記のように、それぞれのClientに割り振ったIDと内容、時間をまとめてJSONを作り、それをString形式で送ります。
``` json
{
   'id': 1,
   'content': 'abcd',
   'time': 'HH:mm:ss'
}
```
![![setumei](d924b6070e031e0d616d7769a45af117.png)

### 発生している問題

検索エンジンで調べてみてもC++のSocket通信の記事自体少ないのに複数Clientに関する記事が全く見つからないのでServer、Clientのコードが書けない。

### 補足情報（FW/ツールのバージョンなど）

VS C++ 2019
Windows10 Pro