[WebSocket] 채팅프로그램 | 나와 상대방 구분하기
현재는 String 메시지 자체를 보냈지만, 이번엔 JSON형태로 메시지를 보내고 받도록 해보겠습니다.
SocketHandler | jsonToObjectParser 메소드 추가
private static JSONObject JsonToObjectParser(String jsonStr) {
JSONParser parser = new JSONParser();
JSONObject obj = null;
try {
obj = (JSONObject) parser.parse(jsonStr);
} catch (ParseException e) {
e.printStackTrace();
}
return obj;
}
- obj = (JSONObject) parser.parse(jsonStr); : jsonStr(String)을 JSONObject로 바꿔줍니다.
SocketHandler | JSon 메시지 처리로 변경
@Component
public class SocketHandler extends TextWebSocketHandler {
HashMap<String, WebSocketSession> sessionMap = new HashMap<>(); //웹소켓 세션을 담아둘 맵
@Override
public void handleTextMessage(WebSocketSession session, TextMessage message) {
//메시지 발송
String msg = message.getPayload();
JSONObject obj = jsonToObjectParser(msg);
for(String key : sessionMap.keySet()) {
WebSocketSession wss = sessionMap.get(key);
try {
wss.sendMessage(new TextMessage(obj.toJSONString()));
}catch(Exception e) {
e.printStackTrace();
}
}
}
@SuppressWarnings("unchecked")
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
//소켓 연결
super.afterConnectionEstablished(session);
sessionMap.put(session.getId(), session);
JSONObject obj = new JSONObject();
obj.put("type", "getId");
obj.put("sessionId", session.getId());
session.sendMessage(new TextMessage(obj.toJSONString()));
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
//소켓 종료
sessionMap.remove(session.getId());
super.afterConnectionClosed(session, status);
}
private static JSONObject jsonToObjectParser(String jsonStr) {
JSONParser parser = new JSONParser();
JSONObject obj = null;
try {
obj = (JSONObject) parser.parse(jsonStr);
} catch (ParseException e) {
e.printStackTrace();
}
return obj;
}
}
- JSONObject obj = new JSONObject(); obj.put("type", "getId"); : {"type":"getId"} 형식으로 넣어집니다.
chat.jsp | javascript 부분 수정
var ws;
function wsOpen(){
ws = new WebSocket("ws://" + location.host + "/chating");
wsEvt();
}
function wsEvt() {
ws.onopen = function(data){
//소켓이 열리면 동작
}
ws.onmessage = function(data) {
//메시지를 받으면 동작
var msg = data.data;
if(msg != null && msg.trim() != ''){
var d = JSON.parse(msg);
if(d.type == "getId"){
var si = d.sessionId != null ? d.sessionId : "";
if(si != ''){
$("#sessionId").val(si);
}
}else if(d.type == "message"){
if(d.sessionId == $("#sessionId").val()){
$("#chating").append("<p class='me'>나 :" + d.msg + "</p>");
}else{
$("#chating").append("<p class='others'>" + d.userName + " :" + d.msg + "</p>");
}
}else{
console.warn("unknown type!")
}
}
}
document.addEventListener("keypress", function(e){
if(e.keyCode == 13){ //enter press
send();
}
});
}
function chatName(){
var userName = $("#userName").val();
if(userName == null || userName.trim() == ""){
alert("사용자 이름을 입력해주세요.");
$("#userName").focus();
}else{
wsOpen();
$("#yourName").hide();
$("#yourMsg").show();
}
}
function send() {
var option ={
type: "message",
sessionId : $("#sessionId").val(),
userName : $("#userName").val(),
msg : $("#chatting").val()
}
ws.send(JSON.stringify(option))
$('#chatting').val("");
}
- JSON.stringify() : JavaScript 값이나 객체를 JSON으로 변환합니다.
#Reference
https://myhappyman.tistory.com/100
Author And Source
이 문제에 관하여([WebSocket] 채팅프로그램 | 나와 상대방 구분하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ihj0043/WebSocket-채팅프로그램-나와-상대방-구분하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)