如何实现,实时显示网页聊天时对方实时输入的内容,不管是否发送。 10C

如何实现,实时显示网页聊天时对方实时输入的内容,不管是否发送。
需求描述:图片说明

原型图片:图片说明

8个回答

那你这不就相当于已经发送了吗,就是允许修改,类似于TIM中联网文档的编写

liaojiezifu
winged_seeds 刚更新了一下问题描述。加了两张图片。
接近 3 年之前 回复

没执行一次onkeyup操作就调用一次接口,把内容传送到你的界面。类似于限制字数的,不过它是获取字数,你可以在对input框输入字符时,就调用接口。

liaojiezifu
winged_seeds 监控键盘的输入?当键盘输入的时候就发送编辑框中的内容?刚更新了一下问题描述。加了两张图片。
接近 3 年之前 回复

这个实现完全没有意义啊,显示正在输入是一定要有不发送的情况的。

liaojiezifu
winged_seeds 需求这么提的。。。
接近 3 年之前 回复

这样的话,要是修改会显示成什么样?

liaojiezifu
winged_seeds 修改会显示修改后的内容,刚更新了一下问题描述。加了两张图片。
接近 3 年之前 回复

keyup事件,对方一边编辑一边发送就行了

liaojiezifu
winged_seeds 监控键盘的输入?当键盘输入的时候就发送编辑框中的内容?刚更新了一下问题描述。加了两张图片。
接近 3 年之前 回复

package www.test;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

@WebServlet("/chat")
public class ChatWebSocketServlet extends WebSocketServlet {
private final Map map = new HashMap();
private static final long serialVersionUID = -1058445282919079067L;
@Override
protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) {
// StreamInbound:基于流的WebSocket实现类(带内流),应用程序应当扩展这个类并实现其抽象方法onBinaryData和onTextData。
return new ChatMessageInbound();
}
class ChatMessageInbound extends MessageInbound {
// MessageInbound:基于消息的WebSocket实现类(带内消息),应用程序应当扩展这个类并实现其抽象方法onBinaryMessage和onTextMessage。
@Override
protected void onOpen(WsOutbound outbound) {
map.put(outbound.hashCode(), outbound);
super.onOpen(outbound);
}
@Override
protected void onClose(int status) {
map.remove(getWsOutbound().hashCode());
super.onClose(status);
}
@Override
protected void onBinaryMessage(ByteBuffer buffer) throws IOException {
}
@Override
protected void onTextMessage(CharBuffer buffer) throws IOException {
String msg = buffer.toString();
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss.SSS");
msg = " 匿名用戶 " + sdf.format(date) + "
" + msg;
broadcast(msg);
}
private void broadcast(String msg) {
Set set = map.keySet();
for (Integer integer : set) {
WsOutbound outbound = map.get(integer);
CharBuffer buffer = CharBuffer.wrap(msg);
try {
outbound.writeTextMessage(buffer);
outbound.flush();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}

package www.test;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

@WebServlet("/chat")
public class ChatWebSocketServlet extends WebSocketServlet {
private final Map map = new HashMap();
private static final long serialVersionUID = -1058445282919079067L;
@Override
protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) {
// StreamInbound:基于流的WebSocket实现类(带内流),应用程序应当扩展这个类并实现其抽象方法onBinaryData和onTextData。
return new ChatMessageInbound();
}
class ChatMessageInbound extends MessageInbound {
// MessageInbound:基于消息的WebSocket实现类(带内消息),应用程序应当扩展这个类并实现其抽象方法onBinaryMessage和onTextMessage。
@Override
protected void onOpen(WsOutbound outbound) {
map.put(outbound.hashCode(), outbound);
super.onOpen(outbound);
}
@Override
protected void onClose(int status) {
map.remove(getWsOutbound().hashCode());
super.onClose(status);
}
@Override
protected void onBinaryMessage(ByteBuffer buffer) throws IOException {
}
@Override
protected void onTextMessage(CharBuffer buffer) throws IOException {
String msg = buffer.toString();
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss.SSS");
msg = " 匿名用戶 " + sdf.format(date) + "
" + msg;
broadcast(msg);
}
private void broadcast(String msg) {
Set set = map.keySet();
for (Integer integer : set) {
WsOutbound outbound = map.get(integer);
CharBuffer buffer = CharBuffer.wrap(msg);
try {
outbound.writeTextMessage(buffer);
outbound.flush();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}

前台页面:

复制代码


欢迎来到聊天室












所用jar包:tomcat中lib下的包就足够用了
再加一个javax.mail

liaojiezifu
winged_seeds 可否详细说明一下
接近 3 年之前 回复

图片说明图片说明

采用websocket

liaojiezifu
winged_seeds 能实时看到对方聊天输入框中还未发送的内容
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐