Vue는 SignalR 프런트엔드와 프런트엔드 실시간 메시지 동기화 구현 방법을 결합합니다.

이 글은 프론트엔드와 백엔드 실시간 메시지 동기화를 달성하기 위해 Vue를 결합한 것을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

최근 사업에서는 서버와 클라이언트 간의 실시간 통신 기능을 구현해야 하므로 Signalr의 개요와 구성을 만들어보았습니다.

SignalR은 ASP.NET의 라이브러리로서 애플리케이션에 대한 실시간 서버 측 및 클라이언트 측 양방향 통신 기능을 쉽고 편리하게 제공할 수 있습니다.

SignalR에는 클라이언트 측에 연결과 허브라는 두 가지 API가 있습니다.

전송된 메시지의 형식이 구체적이고 변경되지 않는 등 특별한 경우에는 Connections API를 사용하세요.

허브는 클라이언트와 서버가 서로 직접 메소드를 호출할 수 있도록 해주는 Connections API의 고급 구현이기 때문에 대부분의 경우에 사용됩니다. 예를 들어 서버가 새로운 주문을 받으면 클라이언트의 인쇄 메서드를 호출하는 것과 같은 실제 적용의 특정 시나리오에서는 클라이언트가 인쇄를 완료한 후 서버의 주문 상태 업데이트 메서드를 호출합니다.

다음은 프런트 엔드 허브의 API를 소개합니다

생성 프록시

생성 프록시를 사용하면 서버 측에서 직접 호출하는 것처럼 구문 수준에서 서버 측 메서드를 호출하는 것이 더 쉽습니다.

다음은 서버 측 코드로, 목록에 채팅 메시지를 추가한다는 뜻입니다

public class DemoChatHub : Hub
{
  public void NewChatMessage(string name, string message)
  {
    Clients.All.addMessageToList(name, message);
  }
}

클라이언트 호출 시:

var demoChatHubProxy = $.connection.DemoChatHub;
demoChatHubProxy.client.addMessageToList = function (name, message) {
  console.log(name + ' ' + message);
};
$.connection.hub.start().done(function () {
 
  $('#newChatMessage').click(function () {
     demoChatHubProxy.server.newChatMessage($('#displayname').val(), $('#message').val());
   });
});

생성된 프록시를 사용하지 않을 때, 클라이언트 호출 시

var connection = $.hubConnection();
var demoChatHubProxy = connection.createHubProxy('demoChatHub');
demoChatHubProxy.on('addMessageToList', function(name, message) {
  console.log(name + ' ' + message);
});
connection.start().done(function() {
  $('#newChatMessage').click(function () {
    demoChatHubProxy.invoke('newChatMessage', $('#displayname').val(), $('#message').val());
    });
});

하지만 Vue 프로젝트에서는 프런트엔드와 백엔드가 분리되어 있으면 다음과 같이 참조되지 않습니다.

<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>

그리고 클라이언트 메소드에서 여러 이벤트 핸들러를 사용하려는 경우, 생성된 프록시를 사용할 수 없습니다.

따라서 다음 예에서는 생성된 프록시를 사용하지 않습니다.

1. 연결 설정 방법

var connection = $.hubConnection('localhost:23123');//如果前后端为同一个端口，可不填参数。如果前后端分离，这里参数为服务器端的URL
var demoChatHubProxy = connection.createHubProxy('demoChatHub');
demoChatHubProxy.on('addMessageToList', function(userName, message) {
  console.log(userName + ' ' + message);
}); 
connection.start()
  .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
  .fail(function(){ console.log('Could not connect'); });

연결을 시작하기 전(start 메서드를 호출하기 전) 이벤트 처리 메서드를 하나 이상 등록하는 것이 가장 좋습니다. 등록된 경우 Hubs의 OnConnected 메서드가 호출되지 않으며 서버에서 클라이언트의 메서드를 호출할 수 없습니다. (이는 문제가 발생하기 쉽기 때문에 미리 메서드를 등록해야 합니다.)

2. 클라이언트가 서버 측 메서드를 호출하는 방법
invoke를 사용하세요. 서버를 호출할 때 메서드 이름의 첫 글자를 대문자로 사용할 필요는 없습니다. -끝 구성이 필요합니다.

demoChatHubProxy.invoke('newChatMessage', {name:'a',message:'b'});

3. 서버가 클라이언트 메서드를 호출합니다.

먼저 서버가 메서드를 호출하려면 먼저 클라이언트가 메서드를 등록해야 합니다.

demoChatHubProxy.on('addMessageToList', function(userName, message) {
  console.log(userName + ' ' + message);
});

4 Vue 프로젝트에서 SignalR 사용

먼저 SignalR 패키지를 설치하세요. SignalR은 jQuery에 의존합니다.

npm i signalr,jquery

편의를 위해 webpack.base.conf.js

plugins: [new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'root.jQuery': 'jquery'
    })
  ]

에 전역 jQuery를 등록한 다음 main.js에 SignalR을 도입하세요

import 'signalr'

이때 Vue 프로젝트에서는 SignalR을 사용할 수 있으며, 백엔드 관련 구성은 일시적으로 건너뜁니다.

새 signalr.js를 생성합니다

import { Message } from 'element-ui';
const HUBNAME = 'DefaultHub';

/*客户端调用服务器端方法*/
//更新订单打印次数
const updateOrderPrint = {
  name:'updateOrderPrint',
  method:function(data){
    console.log(data)
  }
}

/*服务器调用客户端方法*/
// 打印新订单
const printNewOrder = {
  name:'printNewOrder',
  method:function(data){
    console.log(data)
  }
}
const get = {
  name:'Get',
  method:function(data){
    console.log(data)
  }
}

//服务器端的方法
const serverMethodSets = [updateOrderPrint];
//客户端的方法
const clientMethodSets = [printNewOrder,get]; //将需要注册的方法放进集合

// 建立连接
export function startConnection() {
  let hub = $.hubConnection(process.env.HUB_API)
  let proxy = createHubProxy(hub) //需要先注册方法再连接
  hub.start().done((connection) =>{
    console.log('Now connected, connection ID=' + connection.id)
  }).fail(()=>{
    Message('连接失败' + error);
    console.log('Could not connect');
  })
  hub.error(function (error) {
    Message('SignalR error: ' + error);
    console.log('SignalR error: ' + error)
  })
  hub.connectionSlow(function () {
    console.log('We are currently experiencing difficulties with the connection.')
  });
  hub.disconnected(function () {
    console.log('disconnected')
  });
  return proxy
}
// 手动创建proxy
export function createHubProxy(hub){
  let proxy = hub.createHubProxy(HUBNAME)
  // 注册客户端方法
  clientMethodSets.map((item)=>{
    proxy.on(item.name,item.method)
  })
  return proxy
}

이런 식으로 signalr.js를 컴포넌트에 도입한 후 startConnection 메소드를 호출하여 연결을 설정합니다.

관련 추천:

python은 itchat을 기반으로 WeChat 그룹 메시지 동기화 로봇을 구현합니다.

위 내용은 Vue는 SignalR 프런트엔드와 프런트엔드 실시간 메시지 동기화 구현 방법을 결합합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!