node.js 를 사용 하여 위 챗 애플 릿 실시 간 채 팅 기능 실현

위 챗 이라는 메 신 저 에 있 는 애플 릿 에서 채 팅 기능 을 실현 하 니 이상 하 다.그러나 지도자 가 요구 하면 항상 해 야 한다.
그리고 실시 간 통신 이라는 키 워드 를 검색 해 웹 사 이 를 오 간다.하지만 붙 여 넣 기 복사 가 너무 많아 서 한참 을 찾 았 지만 원 하 는 것 을 찾 지 못 했 습 니 다.하지만 키워드 인 WebSocket 과 node.js 를 추출 한 다음 에 이 두 가지 가 무엇 인지,어떤 관계 인지 찾 아 보 니 알 게 되 었 습 니 다.
마지막 으로 첫 번 째 로 해 야 할 일 은 node.js 로 서 비 스 를 구축 하 는 것 이 라 고 확정 했다.
1.먼저 홈 페이지 에서 node.js 를 다운로드 합 니 다링크 다운로드
   설치 가 간단 합 니 다.다운로드 한 파일 을 두 번 누 르 면 바로 다음 단계 입 니 다.특별한 선택 이 없습니다.경 로 는 기본 값 이면 됩 니 다.
   명령 행 창 을 열 어 node-v 출력 버 전 을 입력 하여 설치 에 성 공 했 는 지 확인 할 수 있 습 니 다.사실 이것 도 필요 없습니다.

2.그리고 폴 더 를 새로 만 듭 니 다.
   그리고 명령 으로 이 디 렉 터 리 로 이동 합 니 다.이 파일 에 우리 가 사용 할 모듈 을 설치 합 니 다.모듈 을 설치 하기 전에 설정 파일 을 만들어 야 합 니 다.그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다.(어쨌든 제 가 보 고 했 습 니 다)

   프로필 생 성 명령:npm init -f    실행 후 이 파일 아래 에 package.json 이라는 프로필 이 하나 더 있 는 것 을 볼 수 있 습 니 다.먼저 상관 하지 않 아 도 됩 니 다(뒤에 도 관여 하지 않 았 습 니 다).그 다음 에 모듈 을 계속 설치 하 는 작업 을 할 수 있 습 니 다.
   처음에 나 는 설 치 된 socket.io 였 는데,나중에 작은 프로그램 이 전혀 사용 할 수 없다 는 것 을 알 게 되 었 기 때문에,여기 서도 socket.io 는 말 하지 않 았 다.우리 여기 ws 써 요.
    설치 ws 명령:npm install --save ws(마 운 트 해제 모듈 명령:npm uninstall  모듈 이름)
3.모듈 을 설치 한 후 디 렉 터 리 아래 에.js 파일 을 만 듭 니 다.저 는 뉴스.js 입 니 다.
내 가 있 는 이곳 은 틀림없이 너희들 의 서류 보다 더 많 을 것 이 니 신경 쓰 지 마라.

그리고 이.js 파일 을 열 고 서버 코드 를 편집 하기 시작 합 니 다.이것 은 메모 장 을 사용 하 든 다른 소프트웨어 를 사용 하 든 상관 없습니다.
이것 은 가장 간단 한 기본 적 인 연결 을 열 고 응답 하 는 코드 입 니 다.

//  ws  
const WebSocket = require('ws');
//     port   
const wss = new WebSocket.Server({ port: 80});
//          
wss.on('connection', function connection(ws) {
  console.log('    ');
  //             
  ws.on('message', function incoming(data) {
    console.log('    ');
    //data         ，  clients.foreach         
    wss.clients.forEach(function each(client) {
      //       data，         
      client.send(data);
    });
  });
});

여기에 약간 완벽 한 코드 를 붙 여 놓 았 습 니 다.여 기 는 데이터베이스 에 저 장 된 메시지 입 니 다.my sql 을 사용 하기 때문에 my sql 모듈 을 설치 해 야 합 니 다.npm install --save mysql코드:
 여기에 많은 주석 코드 가 있 는데,모두 내 가 다 듬 을 때 사용 하 는 것 이 니,무시 하거나 삭제 할 수 있다.
 이 MySQL 의 데이터 연결 은 자신의 수정 에 따라 표 도
 제 가 사용 하 는 시 계 는 두 필드 id,msg 입 니 다.

var http=require('http');
var qs = require('querystring'); //
var ws=require('ws');
var server=http.createServer(function (req, res) {
  res.end("This is a WebSockets server!");
});
var url = require('url');
//    
function ClientVerify(info) {
  var ret = false;//  
  //url  
  var params = url.parse(info.req.url, true).query;
  //console.log(groupid);
  //groupid=params['groupid']
  //         
  // wss.clients.forEach(function each(client) {
  //   client.send('233');
  // });
  return true;
}
var wss = new ws.Server( { server: server,verifyClient: ClientVerify } );
/*//     
 var mysql = require('mysql');
 //           
 var connection = mysql.createConnection({
  host : '58.87.94.16',
  user : 'root',
  password : 'root',
  database : 'bootdo'
});*/
//     
var mysql = require('mysql');
//      
const pool = mysql.createPool({
  host   : '58.87.94.16',  //      
  user   : 'root',  //      
  password : 'root',  //      
  database : 'bootdo' //      
})
/*    sql        values
        values        mysql     '?'
   query(`select * from my_database where id = ?`, [1])
        pool.query，    */
let query = function(sql,values,callback){
  pool.getConnection(function(err,conn){
    if(err){
      callback(err,null,null);
    }else{
      conn.query(sql,values,function(err,results,fields){
        //    
        conn.release();
        //      
        callback(err,results,fields);
      });
    }
  });
};
module.exports=query;
wss.on('connection', function connection(ws) {
  console.log('    ！');
  //console.log(ws);
  //                  
  var sql='select * from hi_test where groupid=1';
  console.log('sql  ',sql);
  query(sql,function (err,res,fields) {
    console.log('sql    ：', res);
    if(res!=null){
      ws.send(JSON.stringify(res));
    }
  });
  //          
  ws.on('message', function incoming(data) {
    console.log('      message:',data);
    //              
    sql="insert into hi_test(msg) values(?)";
    console.log('sql  ',sql);
    query(sql,data,function (err,res,fields) {
      console.log('sql    ：',res);//res.insertId
    });
    var sendData=JSON.stringify([{msg:data}])
    /**
     *             
     * wss.clients          
     */
    wss.clients.forEach(function each(client) {
      client.send(sendData);
    });
  });
});
server.listen(80, function listening() {
  console.log('       ！');
});
/*  get  
var options = {
  hostname: 'www.tjjxsoft.cn',
  path: '/attendanceParameter/getAttendanceParameter/13',
  method: 'GET'
};
var req = http.request(options, function (res) {
  console.log('  : ' + res.statusCode);
  res.on('data', function (chunk) {
    console.log('    : ' + chunk);
  });
});
req.on('error', function (e) {
  console.log('problem with request: ' + e.message);
});
req.end();*/
/*
/!*  http  *!/
var app = require('http').createServer()
/!*  socket.io*!/
var io = require('socket.io')(app);
/!*      ，     ，       *!/
var PORT = 80;
/!*    *!/
app.listen(PORT);
/!*      *!/
var users = [];
/!**
 *       
 *io          socket
 *       socket         socket
 *io socket       
 *!/
io.on('connection', function (socket) {
  /!*     on，   emit        ，      *!/
  socket.on('login',function(data){
    console.log('     ：')
    console.log(data);
    users.push({
      username:data.username
    });
    /!*           add  *!/
    io.sockets.emit('add',data)
  })
})
console.log('app listen at'+PORT);*/

그리고 명령 행 에 node ws.js(파일 이름)를 입력 하고 돌아 오 라 고 명령 하면 서 서 서 비 스 를 시 작 했 습 니 다.

4.지금 서비스 가 시작 되 었 습 니 다.다음은 애플 릿 쪽 을 만 듭 니 다.
 직접 코드 붙 이기:
wxml：

<view class='homeView'>
  <scroll-view scroll-y style="height:500px;" scroll-top='{{scrolltop}}'>
    <view class='listView'>
      <block wx:for="{{serverMsg}}" wx:key='*this'>
        <!-- -->
        <view wx:if="{{item.user.id!=userInfo.userId}}" class='leftView'>
          <view class='name'>{{item.user.name}}</view>
          <view class='imgmsgleft'>
            <view>
            <!--                 -->
              <image class='touimg' src='https://www.tjjxsoft.cn/static/images/img005.png'></image>
            </view>
            <view>{{item.msg}}</view>
          </view>
        </view>
        <view wx:else class='rightView'>
          <view class='name'>{{item.user.name}}</view>
          <view class='imgmsg'>
            <view>{{item.msg}}</view>
            <view>
            <!--                 -->
              <image class='touimg' src='https://www.tjjxsoft.cn/static/images/img005.png'></image>
            </view>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  <view class='sendView'>
    <input bindinput='sendTextBind' placeholder="      " value='{{sendText}}' />
    <button bindtap='sendBtn' type="primary">  </button>
  </view>
</view>

js：

var app = getApp();
Page({
  data: {
    socket_open: false,//        
    sendText: "",//     
    serverMsg: [],//         
    userInfo: { userId: 1, name: "  ",img:'  '},//app.appData.userInfo,
    scrolltop: 999
  },
  /**     */
  sendTextBind: function(e) {
    this.setData({
      sendText: e.detail.value
    });
    console.log(this.data.sendText);
  },
  /**     */
  sendBtn: function(e) {
    console.log('      ！');
    var msgJson = {
      user: {
        id: this.data.userInfo.userId,//app.appData.userInfo.userId, //  ID    
        name: this.data.userInfo.name, //     
        img: this.data.userInfo.img, //     
      },
      msg: this.data.sendText,//     
      groupid:1
    }
    //    
    this.send_socket_message(JSON.stringify(msgJson));
    this.setData({
      sendText: ""//     ，     
    });
  },
  onLoad: function(options) {
    // app.login();
    // this.setData({
    //   userInfo: app.appData.userInfo
    // });
    //   
    this.wssInit();
  },
  wssInit() {
    var that = this;
    //    
    wx.connectSocket({
      url: 'ws://localhost'//app.appData.socket
    })
    //  WebSocket      。
    wx.onSocketOpen(function(res) {
      console.log('WebSocket     ！');
      that.setData({
        socket_open: true
      });
    });
    //  WebSocket           。
    wx.onSocketMessage(function(res) {
      console.log('       ：', res);
      var server_msg = JSON.parse(res.data);
      console.log(server_msg);
      if (server_msg != null) {
        var msgnew = [];
        for (var i = 0; i < server_msg.length; i++) {
          msgnew.push(JSON.parse(server_msg[i].msg));
        }
        msgnew=that.data.serverMsg.concat(msgnew);
        that.setData({
          serverMsg: msgnew,
          scrolltop: msgnew.length * 100
        });
        console.log(that.data.serverMsg);
      }
    });
    //  WebSocket  。
    wx.onSocketError(function(res) {
      console.log('WebSocket      ，   ！', res)
    });
  },
  send_socket_message: function(msg) {
    //socket_open，           true，        
    if (this.data.socket_open) {
      wx.sendSocketMessage({
        data: msg
      })
    }
  }
})

wxss：

.homeView {
  border-top: 1px solid #ededed;
}
.listView{
  padding-bottom: 50px;
}
.listView>view {
  padding: 10px;
}
.rightView {
  text-align: right;
}
.imgmsgleft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.imgmsgleft>view:last-child {
  border: solid 1px gray;
  padding: 10px;
  border-radius: 6px;
}
.imgmsg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.imgmsg>view:first-child {
  border: solid 1px gray;
  padding: 10px;
  border-radius: 6px;
  background-color: green;
}
.touimg {
  width: 50px;
  height: 50px;
}
.name {
  font-size: 14px;
  color: gray;
}
.sendView {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0px;
  border-top: 1px #ededed solid;
  background-color: white;
}
.sendView>button {
  width: 20%;
}
.sendView>input {
  width: 80%;
  height: auto;
}

효과 그림:

미리 볼 때 디 버 깅 을 열 어야 합 니 다.WSS 프로 토 콜 이 아니 기 때문에 직접 사용 할 수 없습니다.
총결산
위 에서 말 한 것 은 편집장 이 소개 한 node.js 를 사용 하여 위 챗 애플 릿 실시 간 채 팅 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!