express 프레임 워 크 는 Websocket 기반 의 간단 한 채 팅 방 을 실현 합 니 다.

8183 단어 expresswebsocket
최근 에 재 미 있 는 것 을 쓰 려 고 간단 하고 보기 좋 지 않 은 작은 물건 을 만 들 었 다.
우선 컴퓨터 에 node 가 설치 되 어 있 는 지 확인 하고 절차 에 따라 일 을 할 수 있 습 니 다~~
1.폴 더 만 들 기
2.현재 폴 더 주소 표시 줄 을 비우 고 폴 더 주소 표시 줄 에 cmd.exe 를 입력 합 니 다.
3.작은 것 을 다운로드 해 야 합 니 다.명령 행 에 입력 해 야 합 니 다.
npm install express Enter 잠시 기다 리 세 요.
npm install express-session Enter 잠시 만 기 다 려 주세요npm install ejs Enter 잠시 만 기 다 려 주세요npm install socket.io 리 턴 기다 리 고 있다 땡~~~해결!!!4.설치 가 완료 되면 당신 이 만 든 폴 더 아래 에 node 가 있 습 니 다.modules 폴 더,그 다음 에 우 리 는 두 개의 폴 더 를 만들어 야 합 니 다.하나의 폴 더(Public)는 정적 자원 을 저장 하고 jquery 파일 을 추가 하 며 하나의 폴 더(views)는 정적 템 플 릿 ejs 파일 을 저장 해 야 합 니 다.
5.다음 에 우 리 는 당신 이 만 든 폴 더 아래 에 입구 파일(app.js)을 만들어 야 합 니 다.
6.app.js 에 써 야 할 것

var express=require('express');
var app=express();


//  express web server
var http=require('http').Server(app);
//  websocket server-->http://localhost:3000/socket.io/socket.io.js
var io=require('socket.io')(http);
//    3000
http.listen(3000);
7.(1)로 딩 경로,처리 경로,ejb 템 플 릿 설정,정적 자원 관리자 처리

app.get app.post
app.set("view engine","ejs");
app.use(express.static('./public'));
(2)두 파일 을 만 듭 니 다.index.ejs,chat.ejs 에서 도입 해 야 합 니 다.

<script src="/socket.io/socket.io.js"></script>
<script src="/jquery-1.12.4.js"></script>
만약 당신 이 이곳 에 없다 면,당신 은 이렇게 놀 수 있 습 니 다~~
우리 온라인 인용 할 수 있 잖 아.

<script src="http://code.jquery.com/jquery-latest.js"></script>
8.app.get 경로 action='check'
로그 인 을 판단 하 는 세 가지 조건
1.-비 어 있 으 면 안 돼 요.
2.-이름 바 꾸 면 안 돼 요.
3-채 팅 페이지 등록 및 건 너 뛰 기
9.우 리 는 로그 인 했 습 니 다.이 야 기 를 하려 면 다른 사람 에 게 우리 의 이름 을 알려 야 합 니 다!!그래서 여 기 는 session 을 처리 하고 chat 페이지 에 표시 해 야 하 잖 아 요.
10.그래서 우 리 는 웹 소켓 통신 을 시작 해 야 한다.
client

<script src="/socket.io/socket.io.js"></script>
<script src="/jquery-1.12.4.js"></script>

<script>
   var socket=io();

   socke.emit('   '，'  ')；        （      ）
</script>
server

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

    io.emit('     ',data);
  });
});
client

socket.on('     ',function(msg){
     dom     msg        dom  
})
기본 적 인 사고 와 절 차 는 바로 이런 것 이다.
지금 모든 작업 준비 완료,코드 시작
app.js

var express=require('express');
var app=express();
var http=require('http').Server(app);
var io=require('socket.io')(http);

var session=require('express-session');
app.use(session({
 secret: 'keyboard cat',
 resave: false,
 saveUninitialized: true,
 //cookie: { secure: true }
}));

//    
app.set("view engine","ejs");
//    
app.use(express.static('./public'));

var alluser=[];
//   
//    
app.get('/',function(req,res,next){
  res.render('index');
});

//    ，                 
app.get('/check',function(req,res,next){
  var yonghuming=req.query.yonghuming;

  if(!yonghuming){
    res.send('       ');
    return;
  }

  if(alluser.indexOf(yonghuming) != -1){
    res.send('     ');
    return;
  }

  alluser.push(yonghuming);

  console.log(alluser);

  req.session.yonghuming=yonghuming;
  res.redirect("/chat");
});

//   
app.get('/chat',function(req,res,next){
  //console.log(req.session.yonghuming);
  //console.log(123);
  if(!req.session.yonghuming){
    res.redirect("/");
    return;
  }
  res.render('chat',{
    'yonghuming':req.session.yonghuming
  });
});

io.on('connection',function(socket){
  socket.on('liaotian',function(msg){
    console.log(msg);
    //io.emit('liaotian',msg);
    //console.log(io);
    io.emit('liaotian',msg);
  });
})

//    
http.listen(3000);
console.log('server start port 3000');
index.ejs(views 폴 더 아래 에 놓 기)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      width:700px;
      height:30px;
      padding:40px;
      border:1px solid #000;
      margin:0 auto;
    }
    #yonghuming{
      font-size:30px;
    }
  </style>
</head>
<body>
  <div>
    <form action="/check" method="get">
        :
    <input type="text" id="yonghuming" name="yonghuming">
    <input type="submit" value="     ">
    </form>
  </div>
</body>
</html>
chat.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Document</title>
  <style>
    .caozuo{
      position:fixed;
      bottom:0;
      left:0;
      height:100px;
      background-color:#eee;
      width:100%;
    }
    .caozuo input{
      font-size:30px;
    }
    .caozuo input[type=text]{
      width:100%;
    }
  </style>
</head>
<body>
  <h1>Edison   <span id="yonghu">   ：<%=yonghuming %></span></h1>
  <div>
    <ul class="liebiao"></ul>
  </div>
  <div class="caozuo">
  <input type="text" id="neirong"/>
  <input type="button" id="fayan" value="  "/>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="/jquery-1.12.4.min.js"></script>
  <script>
    var socket=io();
    $('#neirong').keydown(function(e){
      if(e.keyCode==13){
            //      
        socket.emit('liaotian',{
          'neirong':$('#neirong').val(),
          'ren':$('#yonghu').html(),
        });
        $(this).val('');
      }


    });

    /*
    $("#fayan").click(function(){
       //          
      socket.emit('liaotian',{
        'neirong':$('#neirong').val(),
        'ren':$('#yonghu').html(),
      });
    });*/

    socket.on('liaotian',function(msg){
      $(".liebiao").prepend("<li><b>"+msg.ren+": </b>"+msg.neirong+"</li>");
    });
  </script>
</body>
</html>

채 팅 방 로그 인 인터페이스

edison 채 팅 방 에 들 어가 서...

이야기
코드 과정 에서 계속 구 덩이 를 밟 고 구 덩이 를 메 웠 습 니 다.처음으로 이 물건 을 만 들 었 습 니 다.익숙 하지 않 은 곳 이 많아 서 오류 가 발생 할 수 있 습 니 다.학습 과정 이 라 서 좀 부 끄 럽 습 니 다.만약 에 여러분 도 잘 썼 다 면 우 리 는 함께 발전 하여 미화 하고 더 많은 기능 을 보완 할 수 있 습 니 다.여러분 의 old 철 을 잊 고 양해 해 주 십시오~~
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
jquery.uploadView 이미지 미리 보기 업로드 기능 구현
AngularJs+Bootstrap 예 쁜 계산기 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage