nodejs에서 웹소켓 통신 기능을 구현하는 방법

이 글에서는 websocket 통신 기능을 구현하기 위해 nodejs를 소켓.io와 결합하는 방법을 주로 소개하며, websocket 통신을 구현하기 위해 nodejs와 소켓.io를 결합한 관련 작업 기술을 예시로 분석합니다. 이 글의 예시를 참고하세요

nodejs와 소켓.io를 결합하여 웹소켓 통신 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

프로젝트에 백그라운드 데이터의 실시간 획득이 필요한 시나리오가 있기 때문에 이전에는 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

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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

다중 페이지 스캐폴딩 재구성을 구현하기 위해 vue에서 cli를 사용하는 방법

JS에서 클릭 투 클릭 드롭다운 메뉴 콘텐츠 동기화 입력 상자 실현

입력 상자 및 드롭다운 상자 연결

Parcel.js를 사용한 패키징 오류 문제

vue 재구성 기술의 자세한 해석

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