HTML5는 Tomcat 7.0을 기반으로 WebSocket 연결과 간단한 실시간 채팅을 구현합니다.-PHP开发-php.cn

HTML5는 Tomcat 7.0을 기반으로 WebSocket 연결과 간단한 실시간 채팅을 구현합니다.

高洛峰

풀어 주다： 2016-12-08 13:37:05

원래의

1382명이 탐색했습니다.

1. 웹소켓이란?

WebSocket은 자연스러운 전이중, 양방향, 단일 소켓 연결입니다. WebSocket을 사용하면 HTTP 요청은 WebSocket 연결(WebSocket 또는 TLS(전송 계층 보안, 이전에는 "SSL"로 알려짐)를 통한 WebSocket)을 열고 클라이언트에서 서버로, 서버에서 클라이언트로의 연결을 재사용하기 위한 단일 요청이 됩니다. WebSocket은 일단 WebSocket 연결이 설정되면 서버가 메시지를 사용할 수 있을 때 보낼 수 있으므로 대기 시간을 줄여줍니다. 예를 들어 폴링과 달리 WebSocket은 단일 요청만 수행합니다. 서버는 클라이언트의 요청을 기다릴 필요가 없습니다. 마찬가지로 클라이언트는 언제든지 서버에 메시지를 보낼 수 있습니다. 사용 가능한 메시지가 있는지 여부에 관계없이 가끔씩 요청을 폴링하고 보내는 것과 비교하면 단일 요청은 대기 시간을 크게 줄여줍니다.

2. WebSocket API

WebSocket API를 사용하면 웹을 통해 클라이언트 애플리케이션과 서버 측 프로세스 간의 전이중 양방향 통신을 설정할 수 있습니다. WebSocket 인터페이스는 클라이언트가 사용할 수 있는 방법과 클라이언트가 네트워크와 상호 작용하는 방법을 지정합니다.

3. WebSocket 생성자

서버에 대한 WebSocket 연결을 설정하려면 WebSocket 인터페이스를 사용하여 연결할 엔드포인트를 나타내는 URL을 가리켜 WebSocket 객체를 인스턴스화합니다. . WebSocket 프로토콜은 클라이언트와 서버 간의 암호화되지 않은 트래픽과 암호화된 트래픽에 각각 사용되는 ws와 wss라는 두 가지 URL 체계를 정의합니다.

예: var ws = new WebSocket("ws://www.websocket.org");

4. WebSocket 이벤트

WebSocket API는 순전히 이벤트 기반입니다. . 애플리케이션 코드는 들어오는 데이터와 연결 상태의 변경 사항을 처리하기 위해 WebSocket 개체의 이벤트를 수신합니다. WebSocket 프로토콜도 이벤트 기반입니다.

WebSocket 객체는 4가지 이벤트를 전달합니다.

A. open 이벤트:

서버가 WebSocket 연결 요청에 응답하면 open 이벤트가 트리거되어 연결을 설정합니다. open 이벤트에 해당하는 콜백 함수를 onopen

인스턴스:

ws.onopen = function(e) {
console.log("Connection open...");
};

로그인 후 복사

B. 메시지 이벤트:

메시지 이벤트는 메시지 수신 시 발생하며, 이 이벤트에 대응하는 콜백 함수는 onmessage입니다.

예:

ws.onmessage = function(e) {
if(typeof e.data === "string"){
console.log("String message received", e, e.data);
} else {
console.log("Other message received", e, e.data);
}
};

로그인 후 복사

C. 오류 이벤트:

오류 이벤트는 다음에 대한 응답으로 사용됩니다. 예상치 못한 실패 시간 트리거. 이 이벤트에 해당하는 콜백 함수는 onerror입니다.
인스턴스:

ws.onerror = function(e){
console.log(&#39;websocked error&#39;);
handerError();
}

로그인 후 복사

D. 닫기 이벤트:

WebSocket 연결이 닫힐 때 닫기 이벤트가 발생합니다. close 이벤트에 해당하는 콜백 함수는 onclose입니다.

인스턴스:

ws.onclose = function(e) {
console.log("Connection closed", e);
};

로그인 후 복사

5. WebSocket 메소드

WebSocket 객체에는 send()와 닫다().

A. send() 메서드:

WebSocket을 사용하여 클라이언트와 서버 간에 전이중 양방향 연결을 설정한 후 연결이 완료되면 send() 메서드를 호출할 수 있습니다. 열립니다. 클라이언트에서 서버로 메시지를 보내려면 send() 메서드를 사용합니다. 하나 이상의 메시지를 보낸 후 연결을 열어두거나 close() 메서드를 호출하여 연결을 종료할 수 있습니다.

예:

ws.send("Hello WebSocket!");

로그인 후 복사

B. 닫기() 메서드:

close() 메서드를 사용하여 닫습니다. WebSocket 연결 또는 연결 시도를 종료합니다. 연결이 닫힌 경우 이 메서드는 아무 작업도 수행하지 않습니다. close()를 호출한 후에는 닫힌 WebSocket에서 데이터를 보낼 수 없습니다. close() 메서드에는 code(숫자 상태 코드)와 이유(텍스트 문자열)라는 두 가지 선택적 매개 변수를 전달할 수 있습니다. 이러한 매개변수를 전달하면 클라이언트가 연결을 닫은 이유에 대한 정보를 서버에 전달할 수 있습니다.

참고: 위는 WebSocket에 대한 간략한 소개입니다. 다음은 간단한 웹페이지 실시간 채팅 사례를 사용하여 WebSocket 사용 방법을 소개합니다.

A: 먼저 새 프로젝트를 chatroom.이라고 부르며, 서버측 연결을 구현하기 위해 새 클래스를 생성합니다. 내 클래스 이름은 ChatWebSocketServlet.Java입니다.

특정 프로젝트는 아래와 같이 빌드됩니다.

B: 서버 측 구현 클래스 ChatWebSocketServlet.java를 작성합니다. 구체적인 코드는 다음과 같습니다.

package com.yc.chat.Servlet;
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<Integer, WsOutbound> map = new HashMap<Integer, WsOutbound>();
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");
msg = " <font color=green>匿名用戶 " + sdf.format(date) + "</font><br/> " + msg;
broadcast(msg);
}
private void broadcast(String msg) {
Set<Integer> 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();
}
}
}
}
}

로그인 후 복사

미화되지 않고 비교적 간단합니다. 구체적인 코드는 다음과 같습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>websocket聊天室</title>
<style type="text/css">
#chat {
text-align: left;
width: 600px;
height: 500px;
width: 600px;
}
#up {
text-align: left;
width: 100%;
height: 400px;
border: 1px solid green;
OVERFLOW-Y: auto;
}
#down {
text-align: left;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<h2 align="center">基于HTML5的聊天室</h2>
<div align="center" style="width: 100%; height: 700px;">
<div id="chat">
<div id="up"></div>
<div id="down">
<textarea type="text" style="width: 602px; height: 100%;" id="send"></textarea>
</div>
</div>
<input type="button" value="连接" onclick="chat(this);"> <input
type="button" value="发送" onclick="send(this);" disabled="disabled"
id="send_btn" title="Ctrl+Enter发送">
</div>
</body>
<script type="text/javascript">
var socket;
var receive_text = document.getElementById("up");
var send_text = document.getElementById("send");
function addText(msg) {
receive_text.innerHTML += "<br/>" + msg;
receive_text.scrollTop = receive_text.scrollHeight;
}
var chat = function(obj) {
obj.disabled = "disabled";
socket = new WebSocket(&#39;ws://localhost:8080/chatroom/chat&#39;);
receive_text.innerHTML += "<font color=green>正在连接服务器……</font>";
//打开Socket
socket.onopen = function(event) {
addText("<font color=green>连接成功！</font>");
document.getElementById("send_btn").disabled = false;
send_text.focus();
document.onkeydown = function(event) {
if (event.keyCode == 13 && event.ctrlKey) {
send();
}
}
};
socket.onmessage = function(event) {
addText(event.data);
};
socket.onclose = function(event) {
addText("<font color=red>连接断开！</font>");
obj.disabled = "";
};
if (socket == null) {
addText("<font color=red>连接失败！</font>");
}
};
var send = function(obj) {
if (send_text.value == "") {
return;
}
socket.send(send_text.value);
send_text.value = "";
send_text.focus();
}
</script>
</html>

로그인 후 복사

이렇게 간단한 실시간 채팅 페이지가 완성되었습니다. 이제 프로젝트를 Tomcat 7.0 서버에 배포하고, 서버 채팅 활성화

결과 표시:

1. 주소 표시줄에 서버 주소를 입력하세요:

http://127.0.0.1:8080 /chatroom/index .jsp

클릭하여 서버에 연결하면 다음과 같습니다.

2. 서로 다른 브라우저에서 열어서 서로 정보를 보냅니다( 저는 구글과 파이어폭스를 사용했습니다.) 결과는 다음과 같습니다.

HTML5는 Tomcat 7.0을 기반으로 WebSocket 연결과 간단한 실시간 채팅을 구현합니다.