gatewayworker长连接下聊天页面之展示对方在线状态

本文介绍如何在gatewayworker长连接环境下,实现在聊天页面上展示对方的在线状态。通过分析提供的课程链接,文章详细讲解了前端页面的设计,包括自动滚动聊天记录到最下方的功能。内容涵盖页面加载、发送消息和接收消息时的状态处理。
摘要由CSDN通过智能技术生成

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+
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值