Socket을 시작합니다.목위일
38268 단어 nodesocketjavascriptwebdev
Socket.io은 웹 응용에 사용되는 자바스크립트 라이브러리로 클라이언트와 서버 간의 real-time 통신을 허용한다.그것은 두 부분으로 구성되어 있다. 브라우저에서 실행되는 클라이언트 라이브러리와 node.js에 사용되는 서버 사이드 라이브러리이다.두 어셈블리의 API는 거의 같습니다.예를 들어 노드.js, 이벤트 드라이브입니다.웹소켓과 소켓에 있어 채팅 앱이나 소셜미디어 구독원은 가장 흔히 볼 수 있는 사용 사례로 사용자 페이지(클라이언트)가 그 중에서 다른 사용자로부터 메시지나 댓글을 받는다.이오.Socket.IO은 주로 websocket 프로토콜을 사용하고 퀴즈를 예비 옵션으로 하며 같은 인터페이스를 제공한다.webSocket 패키지로 간단히 사용할 수 있지만 여러 소켓에 브로드캐스트, 각 클라이언트에 대한 데이터 저장, 비동기식 I/O 등의 다양한 기능을 제공합니다.본고에서 우리는 사용자가 실시간으로 서로 대화할 수 있도록 기본적인 채팅 프로그램을 만들 것이다.애플리케이션은 각각 다른 역할을 수행하는 서버와 클라이언트 두 개의 독립된 구성 요소로 구성됩니다.
우리 채팅 애플리케이션의 서버 책임
우리 채팅 애플리케이션의 고객 책임
이제 우리가 무엇을 구축해야 하는지 알았으니 시작합시다!
NodeJs가 설치되어 있는지 확인
명령 프롬프트에서 다음 명령을 사용하여 nodejs 버전을 인쇄하여 컴퓨터에 nodejs가 설치되어 있는지 확인합니다.
1. > node -v
v14.16.0
채팅 응용 프로그램의 폴더 만들기
이제 프로젝트에 대한 새 폴더를 만듭니다.
mkdir chat-app
cd chat-app
mkdir에서 새 디렉터리를 생성합니다.cd 현재 작업 디렉토리를 변경합니다.지금 우리는 정확한 목록에 있다.새 프로젝트 설정을 얻기 위해 npm를 초기화할 수 있습니다.
npm 초기화
올바른 폴더로 이동하면 이 폴더에서 npm을 초기화할 수 있습니다.
npm init -y
express이라고 한다.Express은 노드에서 서버를 만드는 업계 표준입니다.급행열차를 설치하다
npm i [email protected]
채팅 애플리케이션 폴더에
index.js이라는 새 파일을 만듭니다.서버 구성
index.js에 다음 코드를 추가합니다.1. const express=require('express');
2. const app=express();
3. app.get('/',(req,res)=>{
res.send('Express is up and running!');
})
4. const port=process.env.PORT || 3000;
5. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
위 코드에 대한 설명:
1행:require 함수는
express이라는 변수에 저장된library express를 가져오는 데 사용됩니다.express 라이브러리는 함수 하나만 공개합니다.그래서express는 사실상 하나의 함수이지 하나의 대상이 아니다.우리는 새로운express 프로그램을 만드는 것이라고 부른다.두 번째 줄: 응용 프로그램 자체가 제공하는 다양한 방법으로 서버를 설정하는 데 사용됩니다.
네 번째 줄: 프로그램이 감청하기를 원하는 포트입니다.
다섯 번째 줄: 서버를 시작하고 특정 포트에서 탐지하는 데 사용됩니다.
명령 프롬프트에서 스크립트를 사용하여 node를 호출하여 서버를 시작할 수 있습니다.
node index.js
Server is listening on port 3000
public을 만듭니다.공용 폴더에 index라는 새 파일을 만듭니다.html.
내부 색인.html에 다음 코드를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<h1>Socket.io Chat App</h1>
</body>
</html>
1. const express=require('express');
2. const app=express();
3. app.get('/',(req,res)=>{
res.send('Express is up and running!');
})
4. const port=process.env.PORT || 3000;
5. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
1. const path=require('path');
2. const express=require('express');
3. const app=express();
4. const port=process.env.PORT || 3000;
5. const publicDirectoryPath=path.join(__dirname,'/public');
6. app.use(express.static(publicDirectoryPath));
7. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
node index.js
Server is listening on port 3000
Socket을 시작합니다.목위일
1.0 콘센트를 설치합니다.목위일
Socket.io은 노드의 기본 패키지가 아니므로 설치해야 합니다.노드 모듈에 포함되어 있는지 확인하려면 로컬에 설치되어 있는지 확인하고 서버에 필요합니다.현재 명령 프롬프트에서 명령 npm install [email protected]을 실행하여 채팅 애플리케이션 디렉토리에
socket.io을 설치합니다.npm install [email protected]
package.json의 의존항 부분은 현재 package.json 파일의 끝에 나타날 것이다. 그 중에서 socket.io을 포함한다.{
"name": "chat-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"socket.io": "^2.2.0"
}
}
Express의 기본 설정:
Express 어플리케이션은 http 서버에 전달되며, 이 서버는 socket.io에 연결됩니다.이제
index.js을 편집하여 다음을 추가합니다.const path=require("path");
const http=require("http");
const express=require('express');
const socketio=require('socket.io');
const app=express();
const server=http.createServer(app);
const io=socketio(server);
const port=process.env.PORT || 3000;
const publicDirectoryPath=path.join(__dirname,"/public");
app.use(express.static(publicDirectoryPath));
io.on("connection",(client)=>{
console.log('New websocket connection');
})
server.listen(port,()=>{
console.log(`Server is up on port ${port}!`);
})
socket.io(HTTP 서버) 대상을 전달함으로써 server의 새로운 실례를 초기화합니다.그리고 나서 나는 플러그인에 들어오는 연결 사건을 감청하여 컨트롤러에 기록했다.지금 색인에 들어갑니다.html은
</body>(끝체 태그) 이전에 다음 코드 세그먼트를 추가합니다.<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
socket.io-client을 불러오는 데 필요한 전부입니다. IO 전역을 공개하고 연결합니다.노드 인덱스를 실행 중입니다.js를 다시 사용합니다. 만약 js가 실행 중이라면 control+c를 누르고 프로세스를 다시 시작한 다음
node index.js을 다시 실행하십시오.이제 브라우저를 http://localhost:3000으로 가리킵니다.콘솔에서 '새 웹 소켓 연결' 을 출력하는 것을 보셔야 합니다각 콘센트는 특수 분리 이벤트를 트리거합니다.
io.on('connection', (client) => {
console.log('New websocket connection');
client.on('disconnect', () => {
console.log(''New websocket disconnected');
});
});
socket.on()을 사용하여 보내는 모든 이벤트에 대해 socket.emit() 함수가 있다는 것을 기억하면 된다.NB:The
eventNamecan be any custom name you want to call it.
예: 기본 채팅 애플리케이션
색인에 있습니다.js 편집 파일:
const path=require("path");
const http=require("http");
const express=require('express');
const socketio=require('socket.io');
const app=express();
const server=http.createServer(app);
const io=socketio(server);
const port=process.env.PORT || 3000;
const publicDirectoryPath=path.join(__dirname,"/public");
app.use(express.static(publicDirectoryPath));
io.on("connection",(client)=>{
console.log('New websocket connection');
client.on('messageFromClient', msg => {
io.emit('messageFromServer', msg);
});
client.on('disconnect', () => {
console.log('New websocket disconnected');
});
})
server.listen(port,()=>{
console.log(`Server is up on port ${port}!`);
})
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" placeholder="Say Something..." autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value != "") {
socket.emit('messageFromClient', input.value);
input.value = '';
}
});
socket.on('messageFromServer', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
//server (emit) -> client (receive) -messageFromServer
//client (emit) -> server(receive) -messageFromClient
만약 네가 나의 일을 좋아한다면 고려해 보아라
이렇게 하면 나는 너에게 더 많은 항목, 더 많은 문장을 가져다 줄 수 있다
만약 네가 인터넷 개발에 관한 지식을 더 알고 싶다면 잊지 마라
Reference
이 문제에 관하여(Socket을 시작합니다.목위일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cglikpo/getting-started-with-socket-io-7m4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
