In IE all serverside send method aint delivering data to the client function. I works in all other browsers.
The method is hit, but no data in the response.
(SignalR logging) SignalR: Triggering client hub event 'ping' on hub 'chat'.
Serverside C#/Signalr:
public override Task OnReconnected()
{
var info = "ORC";
Clients.Caller.ping("OnReconnected", info);
return base.OnReconnected();
}
Clientside Angular:
chat.client.ping = onPing;
function onPing(note, info) {
if (info == 'OCO') {
foo();
}
console.log(note)
}
I have disabled ajax cache: $.ajaxSetup({ cache: false });
Stil no data is send back to the client.
Any ideas to solve this problem?
Related
I'm using React 17, Workbox 5, and react-scripts 4.
I created a react app with PWA template using:
npx create-react-app my-app --template cra-template-pwa
I use BackgroundSyncPlugin from workbox-background-sync for my offline requests, so when the app is online again, request will be sent automatically.
The problem is I don't know when the request is sent in my React code, so I can update some states, and display a message to the user.
How can I communicate from the service worker to my React code that the request is sent and React should update the state?
Thanks in advance.
You can accomplish this by using a custom onSync callback when you configure BackgroundSyncPlugin. This code is then executed instead of Workbox's built-in replayRequests() logic whenever the criteria to retry the requests are met.
You can include whatever logic you'd like in this callback; this.shiftRequest() and this.unshiftRequest(entry) can be used to remove queued requests in order to retry them, and then re-add them if the retry fails. Here's an adaption of the default replayRequests() that will use postMessage() to communicate to all controlled window clients when a retry succeeds.
async function postSuccessMessage(response) {
const clients = await self.clients.matchAll();
for (const client of clients) {
// Customize this message format as you see fit.
client.postMessage({
type: 'REPLAY_SUCCESS',
url: response.url,
});
}
}
async function customReplay() {
let entry;
while ((entry = await this.shiftRequest())) {
try {
const response = await fetch(entry.request.clone());
// Optional: check response.ok and throw if it's false if you
// want to treat HTTP 4xx and 5xx responses as retriable errors.
postSuccessMessage(response);
} catch (error) {
await this.unshiftRequest(entry);
// Throwing an error tells the Background Sync API
// that a retry is needed.
throw new Error('Replaying failed.');
}
}
}
const bgSync = new BackgroundSyncPlugin('api-queue', {
onSync: customReplay,
});
// Now add bgSync to a Strategy that's associated with
// a route you want to retry:
registerRoute(
({url}) => url.pathname === '/api_endpoint',
new NetworkOnly({plugins: [bgSync]}),
'POST'
);
Within your client page, you can use navigator.seviceWorker.addEventListener('message', ...) to listen for incoming messages from the service worker and take appropriate action.
I want to trigger an event to pusher private channel and my server side language is laravel I reviewed a lot of resources, but I did not find a comprehensive approach which covers both the server side and the front side Finally I got this solution
in the first step :
export const SendChat = () => {
try {
var pusher = new Pusher('YOUR_APP_KEY', {
cluster: 'ap2',
forceTLS: true,
authTransport: 'jsonp',
authEndpoint: `${baseUrl}pusher/auth`,
});
var channel = pusher.subscribe('private-channel');
channel.bind('pusher:subscription_succeeded', function() {
var triggered = channel.trigger('client-EVENT_NAME', { 'message': 'Hi ....' });
console.log(triggered)
});
} catch (error) {
console.error(error);
}
}
and call it somewhere
<Button onClick={this.props.SendChat} waves='light' >Send</Button>
you must Enable client events in pusher account setting
login to your pusher account -> select the channel ->App Settings -> select Enable client events -> update
add your app key, channel name and event name after that we need authorization in server side this is sample laravel code first add this route in web.php
Route::get('pusher/auth', 'PusherController#pusherAuth');
make PusherController.php like this :
public function pusherAuth()
{
$user = auth()->user();
if ($user) {
$pusher = new Pusher('auth_key', 'secret', 'app_id');
$auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
$callback = str_replace('\\', '', $_GET['callback']);
header('Content-Type: application/javascript');
echo($callback . '(' . $auth . ');');
return;
}else {
header('', true, 403);
echo "Forbidden";
return;
}
}
test it you should see something like this
Pusher : State changed : connecting -> connected with new socket ID 3953.****556
Pusher : Event sent : {"event":"pusher:subscribe","data":{"auth":"83045ed1350e63c912f5:328fb78165d01f7d6ef3bb6d4a30e07c9c0ad0283751fc2c34d484d4fd744be2","channel":"private-chat"}}
Pusher : Event sent : {"event":"client-MessageSent","data":{"message":"Hi ...."},"channel":"private-chat"}
true
It doesn't matter much which client-side language you are using. Angular, Vue, React they all are JS framework and libraries. And, you can consider using a generic JS code which you can place in all 3 apps.
Let me try to give you a detailed answer I can give as per my knowledge.
In order to get started, you should first complete try to complete Chat scenario without pusher. i.e: user should be able to send a message from front-end via the API and it should be stored inside the database.
Once you have done this it is very easy to include pusher in the flow. ( In simple words, you'll have to broadcast an event and that'll inform the Socket Server to broadcast a message to all/other user(s) on the channel )
For Pusher Authentication, you don't need to explicitly create a route and a method. Once you have uncommented BroadcastServiceProvider inside config/app.php. You can run:
php artisan route:list
and, you'll see a route for broadcast broadcasting/auth.
You can use this route to authenticate. Although, you can make few changes and prepend /api before this.
Go into BroadcastServiceProvider.php and replace your boot method with:
public function boot()
{
Broadcast::routes(
[
'prefix' => 'api',
'as' => 'api.broadcasting.auth',
'middleware' => ['auth:sanctum'],
]
);
require base_path('routes/channels.php');
}
I assume you're using Laravel Sanctum for Authentication. If not you need to change the authentication middleware to your provider.
Once done, you can authenticate from frontend using this auth route. So, what I have done is created a service in ReactJS and in the constructor I have created a Pusher instance :
this.pusher = new Pusher(PUSHER_APP_KEY, {
authEndpoint: 'http:localhost:8000/api/broadcasting/auth',
cluster: PUSHER_CLUSTER,
useTLS: true,
auth: {
headers: {
Authorization: 'Bearer ' + authHeader
}
}
});
You only need to instantiate your Pusher once and use this instance throughout the app. So, that's why I have created a service class for Pusher.
If you want things to be simple for now you need to execute this code on the page where you will use pusher. Once the Page load, you need to call this code. So, you'll do:
let pusher = null;
useEffect(() => {
pusher = new Pusher(PUSHER_APP_KEY, {
authEndpoint: 'http:localhost:8000/api/broadcasting/auth',
cluster: PUSHER_CLUSTER,
useTLS: true,
auth: {
headers: {
Authorization: 'Bearer ' + authHeader
}
}
});
}, []);
So, this way we have an instance of Pusher in our functional component or page.
Now, we need to subscribe to channel.
Using this instance of pusher we can subscribe to channels. If you have followed the useEffect approach on the same page then, right after getting the instance you can subscribe to channels and bind to events using this code:
const channel = pusher.subscribe('private-chat.' + channelName)
And, to bind to an event you can do:
channel.bind('event.name', function(data) {
console.log(data);
});
Make sure to replace "channelName" and "event.name" with your channel and event name respectively.
Now you'll be able to listen to your event once broadcasted from the backend.
So, you'll do something like this from the backend. You'll have a method that will store the message inside the database so, let's say that code is:
public function sendMessage (Request $request){
//.... Rest of the logic
$user = $request->user();
// Store the message
$chatMessage = $chat->messages()->create([
'message' => $message,
'sender_id' => $user->id
]);
broadcast(new NewMessage($user, $chatMessage))->toOthers();
//... Rest of the logic
}
This broadcast message will send this message to other user in the chat.
I hope this answer gives you a good idea and direction.
For work with WebSockets via Pusher on Laravel, I recommended using the package Laravel Echo for React part. And on the backend side in config/broadcasting.php setup configuration for Pusher.
See more detail on official documentation Laravel how to use Pusher on the backend side and frontend side.
https://laravel.com/docs/8.x/broadcasting#pusher-channels
I am searching solution for this question more than 3 day and can't find anything..
I have ionic3 App and working width Http POST requests. I am sending requests to my php server and geting data..
My data-api.ts (provider)
public getNotifications(token){
return this.http.post(this.sharedVars.getApi(),"action=messages/notification&token="+token, this.options
).map(res => res.json());
}
profilePage.ts
notifications() {
this.api.getNotifications(this.user.token).subscribe(
data => {
if(data.err == 0){
this.notifications = data.data;
}
},
err => {
console.log(err);
}
);
}
This is working functions and I am getting right output (1) when click this function. but on x action on my server notification count will changed to 2, 3, 4 etc.. and I want load this function not on click, but on page load. so If this.notifications have new value I want change value live (like as firebase)
Example 2:
I have send message action in my data-api.ts (provider)
public sendMessage(token, to, message, attachment){
return this.http.post(this.sharedVars.getApi(),"action=messages/send&token="+token+"&to="+to+"&message="+message+"&attachment="+attachment, this.options
).map(res => res.json());
}
and also have function to get this messages.
public getActivity(token){
return this.http.post(this.sharedVars.getApi(),"action=messages/getActivity&token="+token, this.options
).map(res => res.json());
}
so if I am making post request to sendMessage then I want listen live getActivity action and load new message in my page but not reload.. like as firebase..
I hope this question is clear. because I am not english speaker and tryng to find solution. Tanks
Listening actively to live events is not possible with a single HTTP request in angular.
However you might look into eventSources.
Look at this question for using with angular 2+ :
Creating an RxJS Observable from a (server sent) EventSource
I'm using AI on an Angular site with a WebAPI backend.
I'm setting the AuthenticatedUserContext and I can see the info being attached as cookies when doing http requests to my API. Because of CORS there is a pre-flight http OPTIONS request and as expected this request does not include the AI cookies.
Looking at the telemetry data in AI I can only see the OPTIONS requests but not the GET/POST request. The session and Authenticated user info is not attached to the OPTIONS request. Why is the OPTIONS request recorded but not the GET/POST? How can I record the GET/POST requests without the OPTIONS requests
I replied to you in msdn forum. Replying here as well:
I think you hit the bug. GitHub issue has a workaround suggestion you may try
For filtering use this doc. You'll have code like this:
using Microsoft.ApplicationInsights.Channel;
using Microsoft.ApplicationInsights.Extensibility;
public class SuccessfulDependencyFilter : ITelemetryProcessor
{
private ITelemetryProcessor Next { get; set; }
// Link processors to each other in a chain.
public SuccessfulDependencyFilter(ITelemetryProcessor next)
{
this.Next = next;
}
public void Process(ITelemetry item)
{
if (!OKtoSend(item)) { return; }
this.Next.Process(item);
}
private bool OKtoSend (ITelemetry item)
{
var request = item as RequestTelemetry;
//if its not a Request, return true. We don't care to filter it here
if (request == null) return true;
if (request.Name.StartsWith("OPTIONS")) //CORS Pre Flight Request
{
return false;
}
}
}
I have built an ASP.NET WebAPI which is hosted on a console application. There are some web apis I had created and worked well. Then I tried to implement web socket service on it. The server side code was like below
[RoutePrefix("api/notification")]
public class NotificationController : ApiController
{
[HttpGet]
[Route("")]
public HttpResponseMessage Get()
{
if (HttpContext.Current.IsWebSocketRequest)
{
HttpContext.Current.AcceptWebSocketRequest(new NotificationWebSocketHandler());
return Request.CreateResponse(HttpStatusCode.SwitchingProtocols);
}
else
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
}
public class NotificationWebSocketHandler : WebSocketHandler
{
private static WebSocketCollection _clients;
static NotificationWebSocketHandler()
{
_clients = new WebSocketCollection();
Task.Factory.StartNew(() =>
{
while (true)
{
Task.Delay(TimeSpan.FromSeconds(5));
if (_clients.Count > 0)
{
_clients.Broadcast(Guid.NewGuid().ToString());
}
}
});
}
public override void OnOpen()
{
_clients.Add(this);
Console.WriteLine("Web socket client opened, client count = {0}", _clients.Count);
}
public override void OnClose()
{
_clients.Remove(this);
Console.WriteLine("Web socket client closed, client count = {0}", _clients.Count);
}
}
}
But when I opened the client page (which was built on AngularJS) I got the error message said WebSocket connection to 'ws://10.222.115.220:8080/api/notification/' failed: Error during WebSocket handshake: Unexpected response code: 500
My client side code was
app.shared.controllers.controller('DashboardCtrl', function ($q, $scope) {
var ws = new WebSocket("ws://10.222.115.220:8080/api/notification/");
ws.onopen = function () {
console.log('web socket opened');
}
ws.onmessage = function (message) {
$scope.seed = message;
};
$scope.seed = '(empty)';
});
When I attached debug and added a breakpoint at the entry of my Get function, and I found the error 500 was raised without this breakpoint hit. I think this means the error was generated by WebAPI internally.
I'm not sure if anything wrong in my code, or WebSocket feature doesn't support console application host.
you are using the Web API in "Self Host"-mode? (hosted in the console)
There you have the problem that the object HttpContext.Current is "null".
This is a problem of self-hosting. HttpContext.Current is set while using the IIS (web-hosting). This property is not available during self-hosting. I think this could be your problem. (A null-ref-exception is thrown in your web-api-application and returns 500 - internal server error).