이 글은 프론트엔드와 백엔드 실시간 메시지 동기화를 달성하기 위해 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 사용
npm i signalr,jquery
plugins: [new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', 'root.jQuery': 'jquery' }) ]에 전역 jQuery를 등록한 다음 main.js에 SignalR을 도입하세요
import 'signalr'
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!