WebSocket 간단 한 고객 지원 채 팅 시스템 실현

수요
여러 업 체 의 전자상거래 시스템,예 를 들 어 경 동 쇼핑 몰 은 서로 다른 업 체 간 의 고객 지원 이 다 르 고 직면 하 는 사용자 도 다르다.이러한 전자상거래 시스템 의 고객 지원 채 팅 시스템 을 실현 하려 면 이 시스템 은 반드시 다 중 고객 지원,한 쌍 의 다 중 사용 자 를 지원 하 는 채 팅 시스템 이 어야 한다.
두 가지 사고방식
Node.js 를 사용 하여 서버 를 구축 하고 웹 소켓 모듈,node-uid 모듈 을 설치 합 니 다.고객 센터 와 사용자 측 에서 고객 센터 ID 와 사용자 ID 를 전달 함으로써 메 시 지 를 전송 합 니 다.
구체 적 실현
3.1 노드 서버 구축
본인 의 앞 글 인'Centos 6.8 하 Node.js 의 설치'를 참고 하 세 요.
3.2 ws 모듈,node-uid 모듈 설치


npm install ws
npm install ws

3.3 server.js 생 성
프로젝트 에 server.js 를 새로 만 들 고 서 비 스 를 만 들 며 8906 포트 를 지정 합 니 다(아래 는 주요 코드 입 니 다.참고 만 하 십시오)


const WebSocket = require('ws');
onst wss = new WebSocket.Server({ port: 8906 });
const uuid = require('node-uuid');
//          
//        
wss.on('connection', function(ws) {
  console.log('client [%s] connected', clientIndex);
  var connection_uuid = uuid.v4();
  var nickname = "AnonymousUser" + clientIndex;
  clientIndex += 1;
  clients.push({ "id": connection_uuid, "ws": ws, "nickname": nickname });
  
 //        
  ws.on('message', function(e) {
   var data = JSON.parse(e);
   var type = data.type;
   //         
  });

  // ws          
  ws.on("close", function () {
   websocketClose();
  });
  
  //      websocketClose()、wsSend()、socketClose    
  //              
  process.on("SIGINT", function () {
   console.log("SOCKET CLOSED!");
   ("     ，     ");
   process.exit();
  });
});

3.4 customer.html 만 들 기
이 페이지 는 사용자 페이지 입 니 다.페이지 에 웹 소켓 연결 을 만 들 고 서버 에 메 시 지 를 보 냅 니 다(아래 는 주요 코드 입 니 다.참고 하 십시오)


<script>
  //    
  const ws = new WebSocket("ws://22.33.66.88:8906");
  var client_id = '';
  
  //ws        
  ws.onopen = function (e) {
   //       ws       
  };

  //      
  ws.onmessage = function (e) {
   //   
  };
   
  //ws          
  ws.onerror = function (e) {
   //   
  };

  //ws           
  ws.onclose = function (e) {
   //   
  };
   
  //      appendLog()、sendMessage()、sendMessage2()、wsSendMessage()    
</script>

3.5 customerService.html 만 들 기
이 페이지 는 고객 지원 페이지 로 customer.html 와 유사 하 며 코드 는 customer.html 를 참고 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

WebSocket+spring 예제 demo 자세히 보기(sockJs 라이브러리 사용)

예를 들어 Canvas, 로컬 저장소, 멀티미디어 프로그래밍 인터페이스, WebSocket 등이다.이 중'웹의 TCP'라고 불리는 웹소켓은 특히 개발자들의 주의를 끈다.WebSocket의 등장으로 브라우저가 Sock...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

WebSocket 간단 한 고객 지원 채 팅 시스템 실현

좋은 웹페이지 즐겨찾기