{"id":1422,"date":"2025-05-06T03:10:34","date_gmt":"2025-05-06T03:10:34","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1422"},"modified":"2026-07-21T10:00:58","modified_gmt":"2026-07-21T01:00:58","slug":"nodejs-rnsocket","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/05\/06\/nodejs-rnsocket\/","title":{"rendered":"Nodejs+ReactNative Login,SocketMessage"},"content":{"rendered":"\n

\u2705 \ucf54\ub4dc \ub2e4\uc6b4\ub85c\ub4dc \/ Code Download<\/p>\n\n\n\n

https:\/\/github.com\/gideonslife01\/flm-js-nodejs<\/a><\/p>\n\n\n\n

\ud83c\udf10 \uc774 \uc571\uc740 \ub85c\uadf8\uc778\uacfc \uc18c\ucf13\uba54\uc138\uc9c0 \ubc1c\uc1a1\uae30\ub2a5\uc774 \uc788\uc2b5\ub2c8\ub2e4.(\uc6f9,\ubaa8\ubc14\uc77c \uc571[\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c])
This app has login and socket message sending functions. (Web, mobile app [React Native])<\/p>\n\n\n\n

\ud83c\udf10 SockeetMessage\ub294 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc785\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\ub97c \uc0c8\ub86d\uac8c \uc0dd\uc131\ud574\uc11c \uc0ac\uc6a9\ud558\uc138\uc694
SocketMessage is for React Native. Please create a new project to use it.<\/p>\n\n\n\n

\ud83c\udf101.\ub514\ub809\ud1a0\ub9ac\/Directory<\/strong><\/p>\n\n\n\n

1)nodejs+socketMessage\/ReactNativeApp\/ : \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \/ ReactNative<\/p>\n\n\n\n

— \ud30c\uc77c \ubc0f \ub514\ub809\ud1a0\ub9ac<\/p>\n\n\n\n

android\t\tindex.js\tios\t\tpackage.json\tsrc<\/code><\/pre>\n\n\n\n
— src \ub514\ub809\ud1a0\ub9ac<\/p>\n\n\n\n
src<\/strong> : \uc571 \uc18c\uc2a4\ucf54\ub4dc\/App souce code\n- files : MainScreen.js,LoginScreen.js,index.js\n\n- MainScreen.js,LoginScreen.js,index.js\ub294 \uae30\uc874 \ub85c\uadf8\uc778 \ud30c\uc77c\uacfc \ub3d9\uc77c\ud569\ub2c8\ub2e4.\nMainScreen.js, LoginScreen.js, and index.js are the same as the existing login files.\n\n- SocketMessage.js\ub294 \uc18c\ucf13\uba54\uc138\uc9c0 \uc218\uc2e0 \ubc0f \ubc1c\uc1a1 \ud074\ub77c\uc774\uc5b8\ud2b8\uc785\ub2c8\ub2e4.\nSocketMessage.js is a socket message receiving and sending client.\n\n<\/code><\/pre>\n\n\n\n
— ios \ub514\ub809\ud1a0\ub9ac \/ ios direactory<\/p>\n\n\n\n
ios<\/strong> : ios\uc124\uc815\ud30c\uc77c\ub85c http\ud5c8\uc6a9\uc124\uc815\ud30c\uc77c\uc774 \uc788\uc2b5\ub2c8\ub2e4. \/ There is an iOS configuration file for allowing HTTP connections.\n- info.plist<\/code><\/pre>\n\n\n\n
— android \ub514\ub809\ud1a0\ub9ac \/ android directory<\/p>\n\n\n\n
android<\/strong> : Android SDk\uc704\uce58\uac00 \uc788\uc2b5\ub2c8\ub2e4. \/ There is an Android SDK location.\n- local.properties<\/code><\/pre>\n\n\n\n
2)nodejs+socketMessage\/login+socketmessage : Nodejs<\/p>\n\n\n\n
— \ud30c\uc77c \ubc0f \ub514\ub809\ud1a0\ub9ac \/ files and directory<\/p>\n\n\n\n
node_modules\t\tpackage.json\t\tserver.js\npackage-lock.json\tpublic<\/code><\/pre>\n\n\n\n
— public : ejs \ud30c\uc77c \/ ejs files<\/p>\n\n\n\n
login.ejs\t\tSocketMessage.ejs<\/code><\/pre>\n\n\n\n
— server.js : \uc11c\ubc84 \uc2e4\ud589\ud30c\uc77c\uc785\ub2c8\ub2e4. \/ This is the server executable file.<\/p>\n\n\n\n
\n\n\n\n
\ud83c\udf102.\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc124\uce58  \/ ReactNative Install<\/strong>
1)\ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 : Project creation<\/strong>
https:\/\/reactnative.dev\/docs\/getting-started-without-a-framework<\/a>
– \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \/ Create a project with the following command.<\/p>\n\n\n\n
npx @react-native-community\/cli@latest init Your Project name<\/code><\/pre>\n\n\n\n
— \ubaa8\ub4c8\uc124\uce58 \/ modules install<\/p>\n\n\n\n
\u2714\ufe0fpackage.json\ud30c\uc77c\uc5d0\uc11c \uc544\ub798 \ubd80\ubd84\uc758 \ubaa8\ub4c8\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can see the modules in the following section in the package.json file.<\/p>\n\n\n\n
\u2714\ufe0fnpm install @react-native-async-storage\/async-storage \uc774\ub807\uac8c \uc124\uce58 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
You can install it like this: npm install @react-native-async-storage\/async-storage.<\/p>\n\n\n\n
  \"dependencies\": {\n    \"@react-native-async-storage\/async-storage\": \"^2.1.2\",\n    \"@react-navigation\/native\": \"^7.1.8\",\n    \"@react-navigation\/stack\": \"^7.3.1\",\n    \"react\": \"19.0.0\",\n    \"react-native\": \"0.79.2\",\n    \"react-native-gesture-handler\": \"^2.25.0\",\n    \"react-native-safe-area-context\": \"^5.4.0\",\n    \"react-native-screens\": \"^4.10.0\",\n    \"socket.io-client\": \"^4.8.1\"\n  },<\/code><\/pre>\n\n\n\n
npm install @react-native-async-storage\/async-storage@latest\nnpm install @react-navigation\/native@latest\nnpm install @react-navigation\/stack@latest\nnpm install react-native-gesture-handler@latest\nnpm install react-native-safe-area-context@latest\nnpm install react-native-screens@latest\nnpm install socket.io-client@latest<\/code><\/pre>\n\n\n\n
2)\uc548\ub4dc\ub85c\uc774\ub4dc\uc124\uc815 \/ android settings<\/strong><\/p>\n\n\n\n
–\ud83d\udcd3 \uc774 \ubd80\ubd84\uc740 \uc624\ub958 \ubc1c\uc0dd\uc2dc\uc5d0\ub9cc \uc801\uc6a9\ud569\ub2c8\ub2e4.
This part applies only when an error occurs.<\/p>\n\n\n\n
— sdk location\uc124\uc815 \/ sdk location settings
project\/android\/locals.properties\ud30c\uc77c\uc774 \uc5c6\uc73c\uba74 \uc0dd\uc131<\/p>\n\n\n\n
— locals.properties\ud30c\uc77c\uc5d0 \uc548\ub4dc\ub85c\uc774\ub4dc sdk\uc704\uce58\ub97c \uc785\ub825 \/ Enter the Android SDK location in the locals.properties file
\u203bsdk\uc704\uce58\ub294 \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624 \uba54\ub274\uc758 settings->Language & Frameworks->Android SDK->Android SDK Location\uc5d0\uc11c \ud655\uc778 \uac00\ub2a5
You can check the SDK location in the Android Studio menu: settings->Language & Frameworks->Android SDK->Android SDK Location<\/p>\n\n\n\n
sdk.dir=\/Users\/gimdaegyeong\/Library\/Android\/sdk<\/p>\n\n\n\n
3)IOS \uc124\uc815 \/ IOS Settings<\/strong><\/p>\n\n\n\n
— \ubaa8\ub4c8\uc744 \uc124\uce58\ud558\uba74 \ubc18\ub4dc\uc2dc ios\ub514\ub809\ud1a0\ub9ac\uc5d0 \ub4e4\uc5b4\uac00\uc11c ‘pod install’\uba85\ub839\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.
After installing the module, be sure to navigate to the ios<\/code> directory and run the pod install<\/code> command.<\/p>\n\n\n\n
— pod install \uba85\ub839\uc744 \uc2e4\ud589\ud558\uc9c0 \uc54a\uc73c\uba74 ios\uc571\uc5d0 \ubaa8\ub4c8\uc774 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
If you do not run the pod install<\/code> command, the module will not be applied to the iOS app.<\/p>\n\n\n\n
\u2013 https\uac00 \uc544\ub2cc http\ud504\ub85c\ud1a0\ucf5c\uc744 \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 http\ud504\ub85c\ud1a0\ucf5c \ud5c8\uc6a9 \uc124\uc815\uc744 \ud574\uc57c\ud569\ub2c8\ub2e4.
Since we are using the http protocol instead of https, we need to allow the http protocol.<\/p>\n\n\n\n
— info.plist\ud30c\uc77c\uc744 \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\u2013 \ud30c\uc77c\uc704\uce58 \/ file location : project\/ios\/project name directory\/info.plist

— \ud074\ub77c\uc6b0\ub4dc\/\ud638\uc2a4\ud305 \uc11c\ubc84\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\uc5d0\ub294 ipaddress\ub098 \ub3c4\uba54\uc778\uc744 \uc0ac\uc6a9\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
If you are using a cloud\/hosting server, you can use ipaddress or domain.<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-\/\/Apple\/\/DTD PLIST 1.0\/\/EN\" \"http:\/\/www.apple.com\/DTDs\/PropertyList-1.0.dtd\">\n<plist version=\"1.0\">\n<dict>\n\t<key>CFBundleDevelopmentRegion<\/key>\n\t<string>en<\/string>\n\t<key>CFBundleDisplayName<\/key>\n\t<string>SocketMessage<\/string>\n\t<key>CFBundleExecutable<\/key>\n\t<string>$(EXECUTABLE_NAME)<\/string>\n\t<key>CFBundleIdentifier<\/key>\n\t<string>$(PRODUCT_BUNDLE_IDENTIFIER)<\/string>\n\t<key>CFBundleInfoDictionaryVersion<\/key>\n\t<string>6.0<\/string>\n\t<key>CFBundleName<\/key>\n\t<string>$(PRODUCT_NAME)<\/string>\n\t<key>CFBundlePackageType<\/key>\n\t<string>APPL<\/string>\n\t<key>CFBundleShortVersionString<\/key>\n\t<string>$(MARKETING_VERSION)<\/string>\n\t<key>CFBundleSignature<\/key>\n\t<string>????<\/string>\n\t<key>CFBundleVersion<\/key>\n\t<string>$(CURRENT_PROJECT_VERSION)<\/string>\n\t<key>LSRequiresIPhoneOS<\/key>\n\t<true\/>\n\n<!--http\ud5c8\uc6a9\uc744 \uc704\ud55c \ubcf4\uc548\uc124\uc815-->\n<key>NSAppTransportSecurity<\/key>\n<dict>\n    <key>NSAllowsArbitraryLoads<\/key>\n    <false\/>\n    <key>NSExceptionDomains<\/key>\n    <dict>\n\n        <key>192.168.0.10<\/key><\/mark>\n        <dict>\n            <key>NSExceptionAllowsInsecureHTTPLoads<\/key>\n            <true\/>\n            <key>NSExceptionRequiresForwardSecrecy<\/key>\n            <false\/>\n            <key>NSIncludesSubdomains<\/key>\n            <false\/>\n        <\/dict>\n\n    <\/dict>\n<\/dict>\n<!--\/\/ http\ud5c8\uc6a9\uc744 \uc704\ud55c \ubcf4\uc548\uc124\uc815-->\n\n\n\t<key>NSLocationWhenInUseUsageDescription<\/key>\n\t<string><\/string>\n\t<key>UILaunchStoryboardName<\/key>\n\t<string>LaunchScreen<\/string>\n\t<key>UIRequiredDeviceCapabilities<\/key>\n\t<array>\n\t\t<string>arm64<\/string>\n\t<\/array>\n\t<key>UISupportedInterfaceOrientations<\/key>\n\t<array>\n\t\t<string>UIInterfaceOrientationPortrait<\/string>\n\t\t<string>UIInterfaceOrientationLandscapeLeft<\/string>\n\t\t<string>UIInterfaceOrientationLandscapeRight<\/string>\n\t<\/array>\n\t<key>UIViewControllerBasedStatusBarAppearance<\/key>\n\t<false\/>\n<\/dict>\n<\/plist><\/code><\/pre>\n\n\n\n
4)\uc2e4\ud589\/Run<\/strong>
– npm install android \ub610\ub294 npm install ios\uba85\ub839\uc5b4\ub85c \uc2e4\ud589 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can run it with the command npm install android or npm install ios.<\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
3.NODEJS\uc124\uce58 \/ NODEJS install<\/strong>
1)\uc18c\uc2a4\ucf54\ub4dc \ub2e4\uc6b4 \ubc1b\uae30
– \uc704\uc758 \uad6c\uae00 \ub4dc\ub77c\uc774\ube0c\uc5d0\uc11c nodejs+socketMessage\/login+socketmessage \ub514\ub809\ud1a0\ub9ac\ub97c \ub2e4\uc6b4 \ubc1b\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
2)\ubaa8\ub4c8\uc124\uce58 \/ module install
— \uba3c\uc800 npm init\uba85\ub839\uc5b4\ub85c package.json\ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.
First, create a package.json file using the npm init command.
-package.json\ud30c\uc77c\uc5d0\uc11c \uc544\ub798 \ubd80\ubd84\uc758 \ubaa8\ub4c8\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can see the modules in the following section in the package.json file.<\/p>\n\n\n\n
  \"dependencies\": {\n    \"bcrypt\": \"^5.1.1\",\n    \"express\": \"^5.1.0\",\n    \"express-session\": \"^1.18.1\",\n    \"http\": \"^0.0.1-security\",\n    \"socket.io\": \"^4.8.1\"\n  }<\/code><\/pre>\n\n\n\n
– npm install \uba85\ub839\uc5b4\ub85c \ubaa8\ub4c8\uc744 \uc124\uce58 \ud569\ub2c8\ub2e4. \/ Install the module using the npm install<\/code> command.<\/p>\n\n\n\n
npm install express express-session bcrypt http socket.io --save<\/code><\/pre>\n\n\n\n
3)\uc2e4\ud589 \/ run
— node server.js\ub85c nodejs\uc11c\ubc84\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4.
Start the Node.js server with node server.js<\/code>.<\/p>\n\n\n\n
4)\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000\uc744 \uc2e4\ud589\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ud654\uba74\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
If you run http:\/\/localhost:3000 in your browser, you will see a screen like the following.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u203b \ub85c\uadf8\uc778 ID\ub294 testuser,testuser2\uc774\uba70 \ud328\uc2a4\uc6cc\ub4dc\ub294 \ubaa8\ub450 11111111\uc785\ub2c8\ub2e4.
The login ID is testuser,testuser2 and the password is 11111111.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u2705 \ucf54\ub4dc \ub2e4\uc6b4\ub85c\ub4dc \/ Code Download https:\/\/github.com\/gideonslife01\/flm-js-nodejs \ud83c\udf10 \uc774 \uc571\uc740 \ub85c\uadf8\uc778\uacfc \uc18c\ucf13\uba54\uc138\uc9c0 \ubc1c\uc1a1\uae30\ub2a5\uc774 \uc788\uc2b5\ub2c8\ub2e4.(\uc6f9,\ubaa8\ubc14\uc77c \uc571[\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c]) This app has login and socket message sending functions. (Web, mobile app [React Native]) \ud83c\udf10 SockeetMessage\ub294 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc785\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\ub97c \uc0c8\ub86d\uac8c \uc0dd\uc131\ud574\uc11c \uc0ac\uc6a9\ud558\uc138\uc694SocketMessage is for React Native. Please create a new project to use it. \ud83c\udf101.\ub514\ub809\ud1a0\ub9ac\/Directory 1)nodejs+socketMessage\/ReactNativeApp\/ : \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \/ ReactNative — […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,5],"tags":[],"class_list":["post-1422","post","type-post","status-publish","format-standard","hentry","category-nodejs","category-reactnative","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1422"}],"version-history":[{"count":53,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1422\/revisions"}],"predecessor-version":[{"id":6711,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1422\/revisions\/6711"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}