nodejs는 소켓.io를 결합하여 웹소켓 통신 기능을 구현합니다.

이 글에서는 웹소켓 통신 기능을 구현하기 위해 nodejs를 소켓.io와 결합하는 방법을 주로 소개하며, 웹소켓 통신을 구현하기 위해 소켓.io와 결합한 nodejs의 구체적인 단계와 관련 동작 기술을 예시로 분석합니다. 그것을 참조하십시오. 모두에게 도움이 되기를 바랍니다.

프로젝트에 배경 데이터를 실시간으로 획득해야 하는 시나리오가 있기 때문에 이전에는 http 하트비트 요청 방법을 사용했습니다. websocket은 이 모드에 비해 성능이 크게 향상되고 실시간 성능도 향상시킬 수 있기 때문에 websocket에 대한 연구가 진행되어 왔습니다. 이는 nodejs+socket.io를 사용하여 구현됩니다.

목표 달성

원래 백그라운드 데이터 하트비트 요청 방식을 백그라운드 소켓 연결을 통한 통합 푸시 방식으로 수정했습니다. 백그라운드 데이터는 다른 프로세스에 의해 파일이나 Redis에 기록됩니다. 여기서 구현되는 것은 파일을 읽는 방법입니다.

사전 준비

nodejs 설치(생략)

서버측

새 프로젝트 디렉토리를 생성합니다. 여기는 소켓테스트입니다
sockettest 디렉토리에 들어가서 express 모듈과 소켓io 모듈을 설치합니다

npm install --save express@4.10.2
npm install --save socket.io

새 package.json 파일을 만들고 그 안에 다음 콘텐츠를 작성하세요.

{
 "name": "socket-test",
 "version": "0.0.1",
 "description": "my first socket.io app",
 "dependencies": {
  "express": "^4.10.2",
  "socket.io": "^1.7.2"
 }
}

새 index.html, 기본 액세스 표시 페이지로 사용됩니다. 여기서는 사용되지 않으므로 콘텐츠는 임의적입니다.
새 Trends.js 파일, 그 안에 콘텐츠 작성:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var fs = require('fs');
#默认打开文件
app.get('/', function(req, res){
  res.sendfile('index.html');
});
#用于存储所有socket以广播数据
var iolist = [];
#定义socket on connection（连入）事件行为
io.on('connection', function(socket){
  #将连入socket加入列表
  iolist.push(socket); 
  #记录index，在disconnect（断开连接）发生时将对应的socket删除
  var sockex = iolist.indexOf(socket); 
  #定义on disconnect事件行为
  socket.on('disconnect', function(){
    #将断开连接的socket从广播列表里删除
    iolist.splice(sockex, 1);
  });
});
# 数据广播进程:每1秒钟广播一次
setInterval(function() {
  # 如果没有正在连接的socket，直接返回；
  if (iolist.length <= 0) return;
  var trends = fs.readFileSync(&#39;./data/trends.json&#39;,&#39;utf-8&#39;);#trends数据
  var coins = fs.readFileSync(&#39;./data/coins.json&#39;,&#39;utf-8&#39;);#coins数据
  #向所有socket连接发送数据
  for (i in iolist) {
    # 向客户端发送trends数据
    iolist[i].emit(&#39;trends&#39;, trends);
    # 向客户端发送coins数据
    iolist[i].emit(&#39;coins&#39;, coins);
  }
}, 1000);
# 服务器侦听在sockettest.com的3000端口上
http.listen(3000, function(){
  # 输出到标准输出
  console.log(&#39;listening on sockettest.com:3000&#39;);
});

새 데이터 디렉터리를 만들고, 소켓 서버에서 읽을 데이터를 저장하기 위해 아래에 두 개의 새 파일 Trend 및 Coin을 만듭니다.
새 공용 디렉터리를 만들고 그 안에 index.html이라는 새 파일을 만듭니다. 파일 내용은 다음과 같습니다.

<!--引入必要的js文件-->
<script type="text/javascript" src="http://sockettest:3000/socket.io/socket.io.js"></script>
<script type="text/javascript">
    //新建socket
    var socket = io(&#39;http://sockettest.com:3000&#39;);
    socketdata(socket);
    function socketdata() {
      #定义接收到coins类型数据时的行为
      socket.on(&#39;coins&#39;, function(msg){
        console.log(msg);
      }
      #定义接收到trends类型数据时的行为
      socket.on(&#39;trends&#39;, function(msg){
        console.log(msg);
      }
    }
</script>

코드 배포

두 개의 index.html 파일을 만든 이유는 다음과 같습니다. 기존 웹 프로젝트를 용이하게 하려면 nodejs에서 제공하는 소켓 서비스를 사용하세요. 이러한 방식으로 nginx나 tomcat과 같은 다른 서버에 public/index.html을 배포한 다음 루트 디렉터리에서 소켓 서버를 시작하여 소켓 서비스를 제공할 수 있습니다.
먼저 지금 프로젝트의 루트 디렉터리에서

node ./trends.js

를 실행하고 터미널을 계속 실행한 다음 nginx에 프로젝트를 배포하고 크롬을 통해 nginx에서 제공하는 웹 서비스에 액세스하세요.

http://hostname/ public /index.html

개발자 모드를 켜면 노드 서버로부터 1초마다 소켓 푸시 메시지를 받는 것을 콘솔에서 확인할 수 있습니다. 데이터 디렉터리에 있는 두 파일을 수정하면 해당 파일에 기록된 데이터도 실시간으로 클라이언트에 푸시되는 것을 확인할 수 있습니다.

관련 추천 :

Html5에서의 WebSocket 통신

ThinkPHP와 ajax 결합, Mysql의 클라이언트 통신 기능 구현 코드 예시

js 페이지 간 통신 방식의 저장 이벤트 소개

위 내용은 nodejs는 소켓.io를 결합하여 웹소켓 통신 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!