Submit timestamp met Ajax
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript" charset="utf-8">
function addmsg(type, msg){
$("#messages").append(
"<div class='msg "+ type +"'>"+ msg +"</div>"
);
}
function waitForMsg(){
$.ajax({
type: "GET",
url: "/berichten.php",
async: true,
cache: false,
timeout:50000,
success: function(data){
if (data) {
addmsg("new", data);
}
setTimeout(
waitForMsg,
1000
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
addmsg("error", textStatus + " (" + errorThrown + ")");
setTimeout(
waitForMsg,
15000);
}
});
};
$(document).ready(function(){
waitForMsg();
});
</script>
function addmsg(type, msg){
$("#messages").append(
"<div class='msg "+ type +"'>"+ msg +"</div>"
);
}
function waitForMsg(){
$.ajax({
type: "GET",
url: "/berichten.php",
async: true,
cache: false,
timeout:50000,
success: function(data){
if (data) {
addmsg("new", data);
}
setTimeout(
waitForMsg,
1000
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
addmsg("error", textStatus + " (" + errorThrown + ")");
setTimeout(
waitForMsg,
15000);
}
});
};
$(document).ready(function(){
waitForMsg();
});
</script>
mijn berichten tafel in de database ziet er als volgt uit:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
CREATE TABLE IF NOT EXISTS `berichten` (
`bericht_id` bigint(20) NOT NULL AUTO_INCREMENT,
`onderwerp` varchar(255) DEFAULT NULL,
`bericht` text,
`toegevoegd` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`bericht_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
`bericht_id` bigint(20) NOT NULL AUTO_INCREMENT,
`onderwerp` varchar(255) DEFAULT NULL,
`bericht` text,
`toegevoegd` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`bericht_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Er zijn echter een aantal dingen waar ik niet uitkom. Een daarvan is hoe ik een timestamp mee kan sturen naar berichten.php. Zodat ik in de query kan kijken of er berichten zijn die nieuwer zijn dan de timestamp:
Code (php)
1
WHERE toegevoegd > :ajaxTimestamp
Ik hoop dat mezelf een beetje duidelijk heb gemaakt.
Wanneer je wilt dat het laatste bericht dat ontvangen is ook echt onthouden wordt zul je dit ergens aan op moeten hangen misschien (een user(id), zodat je dit in de database kunt bijhouden, of een cookie om alles clientside te houden). Maar hoe je dit verder bijhoudt hangt sterk af van:
- hoe deze "chat" werkt (het is meer een soort van shoutbox?)
- wat je hiermee wilt kunnen doen
- hoe je om wilt gaan met externe veranderingen (sluiten en openen van browser(tab), page refresh etc.)
@Ward. Dit is allemaal heel nieuw voor mij. Hoe zou ik dat dan aan beiden kanten moeten implementeren. Kun je misschien een simpel voorbeeld geven
@Thomas Je moet het als een soort van service chat applicatie zien. Hetgeen je tegenwoordig vaak op bedrijfs- pagina's ziet, met dat verschil dat de bezoekers zich hebben aangemeld en dus zijn ingelogd voordat ze een bericht kunnen versturen. Dit zijn de gewenste stappen:
1. Bezoeker stuurt een bericht/vraag
2a. Betreft het een nieuwe conversatie dan komt het bericht terecht bij een willekeurige medewerker
2b. Betreft het een lopende conversatie moet er eerst gekeken worden of de medewerker die dat heeft behandeld staat ingelogd. Is dat het geval dan gaat de vraag/bericht + de bericht geschiedenis naar die medewerker. Zo niet dan gaat de vraag/bericht + de bericht geschiedenis naar een willekeurige medewerker.
3. Bericht(en) komt bij medewerker en moet worden gemarkeerd behandeld zodat het niet bij een andere medewerker terecht komt.
Om dit laatste te bewerkstelligen heb ik een extra tabel in de database aangemaakt genaamd conversaties die deze gegevens bijhoud. Die tabel die er als volgt uitziet:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
CREATE TABLE IF NOT EXISTS 'conversaties' (
'conversatie_id' bigint(20) NOT NULL AUTO_INCREMENT,
'klant_id' int(11) NOT NULL,
'medewerker_id' int(11) NOT NULL,
'behandeld' int(11) NOT NULL DEFAULT '0',
PRIMARY KEY ('conversatie_id')
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
'conversatie_id' bigint(20) NOT NULL AUTO_INCREMENT,
'klant_id' int(11) NOT NULL,
'medewerker_id' int(11) NOT NULL,
'behandeld' int(11) NOT NULL DEFAULT '0',
PRIMARY KEY ('conversatie_id')
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
en heb ik in de tabel berichten het veld conversatie_id als Foreign key toegevoegd. Dus als een klant een bericht stuurt word dit toegevoegd aan beiden tabellen. Wanneer het bericht of berichten bij de medewerker terecht komt moeten de velden medewerker_id en behandeld in de de conversaties tabel worden ge-update
Ik heb geen idee of dit de juiste weg is om te bewandelen of dat ik het me zelf onnodig moeilijk maak en hoor dan ook heel graag jou/jullie reacties en of opmerkingen.
Quote:
3. Bericht(en) komt bij medewerker en moet worden gemarkeerd behandeld zodat het niet bij een andere medewerker terecht komt.
Weet niet of dit nodig is, het feit dat je in een conversatie zit wil toch zeggen dat je al geholpen wordt? Misschien zou je voor dit doel een andere tabel kunnen maken, bijvoorbeeld een soort van (virtuele) wachtrij, net zoals bij telefonische hulp.
Ik zou trouwens niet op voorhand alle historie ophoesten, maar desgewenst kan een medewerker oudere chatsessies weer naar boven halen. Of dat je deze koppelt aan tickets ofzo.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
CREATE TABLE IF NOT EXISTS `klanten` (
`klant_id` int(11) NOT NULL AUTO_INCREMENT,
`naam` varchar(12) NOT NULL,
`gebruikersnaam` varchar(12) NOT NULL,
`email` varchar(128) NOT NULL,
`wachtwoord` varchar(128) NOT NULL,
`aanmeldings_datum` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`klant_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
`klant_id` int(11) NOT NULL AUTO_INCREMENT,
`naam` varchar(12) NOT NULL,
`gebruikersnaam` varchar(12) NOT NULL,
`email` varchar(128) NOT NULL,
`wachtwoord` varchar(128) NOT NULL,
`aanmeldings_datum` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`klant_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Wat betreft die wachtrij hoe zie je dat voor je. Met andere woorden wat voor tabellen heb ik nodig in jou opinie om dit werkend te krijgen? Wat betreft die eerder berichten. Dat is een wens van diegene voor wie ik dit opzet.
Al vast bedankt voor verdere reacties
Ik zou het wat voor het hoe plaatsen. Zie het allemaal in eerste instantie los van techniek/implementatie - wat moet er gebeuren?
Ik weet niet wat in jouw situatie fijn werkt. Zo zou het zo kunnen zijn dat een klant een vast contactpersoon heeft. Dan is het wellicht minder handig dat deze met een willekeurige medewerker wordt opgezadeld die zijn/haar historie niet kent. In dat geval is een wachtrij minder handig omdat je niet zo snel mogelijk iemand wilt spreken, maar een specifiek persoon - die mogelijk bezet is. Deze medewerker zou je dan (tijdelijk) uit de lijst van beschikbare medewerkers kunnen verwijderen, of deze een "in gesprek" status geven ofzo.
Eerst bepaal je dus wat je wilt kunnen doen (en hier moet je ook een idee over hebben anders ren je achter elk plausibel idee aan), dan denk je na hoe je dit (visueel) wilt vormgeven en dan ga je pas bouwen cq code kloppen en tabellen creëren. Dit is echt de laatste stap.
Ook kan ik mij zo voorstellen dat wanneer er echt inhoudelijk zaken moeten worden besproken dat je het bedrijf/de medewerker belt - is dit chatsysteem echt voor uitgebreide conversaties of meer voor kattebelletjes?
Je zou om te beginnen de hele "flow" eens uit kunnen schrijven/typen in volzinnen, en dan eens gaan nadenken hoe je dit technisch vormgeeft/aanpakt.
Een persoon logt in als klant.
De klant klikt op de chat tab op de website, die vervolgens een overzichtje toont van beschikbare/alle online medewerkers.
De klant klikt op de naam van een (beschikbare) medewerker. Er verschijnt een bevestigingsscherm waarin wordt gevraagd of je een conversatie wilt starten.
Indien nee: er gebeurt niets.
Indien ja: er wordt een nieuwe dialoog/gebied geopend waarin je kunt gaan typen.
Zijn er andere scenario's waarin medewerkers met elkaar praten of een medewerker een dialoog initieert met een klant? Of klanten met elkaar?
Alternatief: de medewerker krijgt een popup klant X wil een dialoog beginnen. Krijgt dan de keuze om deze te starten of om deze af te wijzen met opgaaf van reden.
Et cetera. Je kunt spelen met ideeën zonder een letter code te kloppen. Ook zou je features kunnen bestempelen met een getal of status hoe graag je deze in de chatfunctionaliteit wilt hebben (moet er per se in zitten, zou er in moeten zitten, mag er eventueel in zitten, zouden we graag (eventueel op een later tijdstip) in willen bouwen / optionele extra).