초보 가이드: 콘센트.목위일
7731 단어 nodenewbieexpressjsjavascript
길잡이
10. 첫 번째 콘센트 연결
소개하다.
콘센트.IO는 실시간 양방향 통신이 가능한 JavaScript 라이브러리입니다.빠르다페이지를 다시 로드할 필요가 없습니다.콘센트.IO는 서버와 클라이언트 간의 직접 통신 터널을 개방할 수 있도록 하는 웹소켓 API를 기반으로 합니다.
이것을 그래프로 대체합니다:
우리는 지금:
따라서 서버에서 클라이언트에게 메시지를 보낼 수 없습니다.브라우저를 새로 고치고 서버에서 메시지를 요청해야 합니다.하지만io에서 실시간 통신을 허용합니다.
브라우저에서 URL을 요청하면 서버와의 채팅 소켓 연결을 엽니다.
무슨 일이 일어날까요?
요약
가져가기:
2. 노드의 서버측 라이브러리
서버/클라이언트에서 메시지를 보내고 다른 쪽(즉 클라이언트/서버)에서 메시지를 받을 수 있도록 코드/논리를 작성해야 하기 때문입니다.
주 항목 디렉토리 설정
//make a new folder
mkdir chat_app
//navigate to the folder
cd chat_app
종속성 설치
터미널에서 npm 설치 의존항을 사용합니다.먼저 노드 및 npm이 설치되어 있는지 확인합니다.
node -v
npm -v
//create the package JSON file which will list all the dependencies used in the project
//leave index.js as the entry point
npm init
//install express
npm install express --save
//install socket.io
npm install socket.io --save
//automatically restarts server upon detecting changes
npm install nodemon --save-dev
디렉토리 구조
마스터 채팅 애플리케이션 폴더(노드 모듈 폴더에 없음):
디렉토리 구조는 다음과 같습니다.
채팅 애플리케이션
├── 노드 단위
├── 공중의
│ └── 색인html
│ └── 풍격css
│ └── 수다를 떨다.js
├── 색인js
├── 소포.json
│
색인에 서버를 만듭니다.js
색인에 있습니다.js에서 노드를 만듭니다.express js 서버 사용하기
// require express first
var express = require("express");
//require socket.IO
var socket = require('socket.io')
//setting up the express app by invoking the express function
var app = express();
//now create a server
//When the server starts listening on port 4000 then fire a callbak function
// The callback function will console.log a string
var server = app.listen(4000, function(){
console.log("Listening to requests on port 4000");
});
// serve a static file to the browser
app.use(express.static("public"));
//Socket setup
//passing var server to the socket function and assigning it to var io
//essentially now socket.IO will work on this server just created
var io = socket(server);
색인을 만듭니다.html
색인에 있습니다.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Newbie Guide</title>
<script src="/socket.io/socket.io.js"></script>
<link href="/style.css" rel="stylesheet" />
</head>
<body>
<h1>Socket.io</h1>
<script src="/chat.js"></script>
</body>
</html>
서버 테스트
터미널에서 다음 명령을 사용하여 서버를 재부팅합니다.
//if using nodemon
nodemon
//if using node
node index.js
[nodemon] 1.18.11
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node index.js`
listening for requests on port 4000,
너는 위에서 너의 웹 페이지를 보아야 한다.현재, 당신은 이미 실제적으로 플러그인을 사용하기 시작할 준비가 되어 있습니다.이오!
첫 소켓 연결
색인에 있습니다.js
//declare var io which is a reference to a socket connection made on the server
var io= socket(server);
//Then use the io.on method which looks for a connection
//upon a connection execute a callback function which will console.log something
io.on('connection', function(){
console.log('made socket connection');
});
//you already included a reference to the socket.io library in index.html so now you have access to it
//make a socket by declaring var socket which will make a socket connection to localhost:4000
var socket = io.connect("http://localhost:4000");
nodemon
[nodemon] 1.18.11
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node index.js`
listening for requests on port 4000,
made socket connection
결론
이제 너는 소켓을 사용하기 시작할 수 있다.서버와 클라이언트 모두에 IO를 설치하여 재미있는 채팅 응용 프로그램으로 만들다.자세한 내용은 섹션 2를 참조하십시오.
리소스
Reference
이 문제에 관하여(초보 가이드: 콘센트.목위일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kauresss/socket-io-guide-for-newbies-5hdm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
