gatewayworker长连接下聊天页面之展示对方在线状态,对应课程:
https://study.163.com/course/courseLearn.htm?courseId=1005015012#/learn/video?lessonId=1051356046&courseId=1005015012
前端页面代码,还包含了自动让聊天记录拉到最下面显示,
聊天记录直接显示最下面,需要在页面加载、发送消息和收到消息这三种状态下,分别处理。
前端页面:
var fromid = {
$fromid};
var toid = {
$toid};
var API_URL = "/api/chat/";
var from_head = '';
var to_head = '';
var to_name='';
$(".send-btn").click(function(){
ver text = $(".send-input").val();
var message = '{"data":"'+text+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}';
$(".chat-content").append('<div><span style="background-image:url('+from_head+')"></span>'+text+'</div>');
$(".chat-content").scrollTop(3000);
ws.send(message);
$(".send-input").val("");
})
}
ws.onmessage = function(e){
var message = eval("("+e.data+")"); //将客户端收到的json转换成js数据
switch(message.type){
case "init":
var bind = '{"type":'bind',"fromid":"'+fromid+