快捷導(dǎo)航

HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡(jiǎn)單的實(shí)時(shí)聊天

更新時(shí)間：2016年10月31日 10:27:11 作者：Mars_hero

WebSocket 是一種自然的全雙工、雙向、單套接字連接。這篇文章給大家介紹了HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡(jiǎn)單的實(shí)時(shí)聊天，感興趣的朋友一起學(xué)習(xí)吧

1、什么是WebSocket？

WebSocket 是一種自然的全雙工、雙向、單套接字連接。使用WebSocket，你的HTTP 請(qǐng)求變成打開(kāi)WebSocket 連接（WebSocket 或者WebSocket over TLS（TransportLayer Security，傳輸層安全性，原稱“SSL”））的單一請(qǐng)求，并且重用從客戶端到服務(wù)器以及服務(wù)器到客戶端的同一連接。WebSocket 減少了延遲，因?yàn)橐坏┙⑵餡ebSocket 連接，服務(wù)器可以在消息可用時(shí)發(fā)送它們。例如，和輪詢不同，WebSocket只發(fā)出一個(gè)請(qǐng)求。服務(wù)器不需要等待來(lái)自客戶端的請(qǐng)求。相似地，客戶端可以在任何時(shí)候向服務(wù)器發(fā)送消息。相比輪詢不管是否有可用消息，每隔一段時(shí)間都發(fā)送一個(gè)請(qǐng)求，單一請(qǐng)求大大減少了延遲。

2、WebSocket API

WebSocket API 使你可以通過(guò)Web，在客戶端應(yīng)用程序和服務(wù)器端進(jìn)程之間建立全雙工的雙向通信。WebSocket 接口規(guī)定了可用于客戶端的方法以及客戶端與網(wǎng)絡(luò)的交互方式。

3、WebSocket構(gòu)造函數(shù)

為了建立到服務(wù)器的WebSocket連接，使用WebSocket接口，通過(guò)指向一個(gè)代表所要連接端點(diǎn)的URL，實(shí)例化一個(gè)WebSocket對(duì)象。WebSocket 協(xié)議定義了兩種URL方案（URL scheme）—ws和wss，分別用于客戶端和服務(wù)器之間的非加密與加密流量。

實(shí)例：var ws = new WebSocket("ws://www.websocket.org");

4、WebSocket事件

WebSocket API 是純事件驅(qū)動(dòng)的。應(yīng)用程序代碼監(jiān)聽(tīng)WebSocket對(duì)象上的事件，以便處理輸入數(shù)據(jù)和連接狀態(tài)的改變。WebSocket協(xié)議也是事件驅(qū)動(dòng)的。

WebSocket對(duì)象調(diào)度4個(gè)不同的事件：

A、open事件：

一旦服務(wù)器響應(yīng)了WebSocket連接請(qǐng)求，open事件觸發(fā)并建立一個(gè)連接。open事件對(duì)應(yīng)的回調(diào)函數(shù)稱作onopen

實(shí)例：

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

B、messagess事件：

message事件在接收到消息時(shí)觸發(fā)，對(duì)應(yīng)于該事件的回調(diào)函數(shù)是onmessage。

實(shí)例：

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、error事件：

error 事件在響應(yīng)意外故障的時(shí)候觸發(fā)。與該事件對(duì)應(yīng)的回調(diào)函數(shù)為onerror。
實(shí)例：

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

D、close事件：

close 事件在WebSocket 連接關(guān)閉時(shí)觸發(fā)。對(duì)應(yīng)于close 事件的回調(diào)函數(shù)是onclose。

實(shí)例：

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

5、WebSocket方法

WebSocket 對(duì)象有兩個(gè)方法：send() 和close()。

A、 send() 方法：

使用WebSocket在客戶端和服務(wù)器之間建立全雙工雙向連接后，就可以在連接打開(kāi)時(shí)調(diào)用send() 方法。使用send() 方法可以從客戶端向服務(wù)器發(fā)送消息。在發(fā)送一條或者多條消息之后，可以保持連接打開(kāi)，或者調(diào)用close() 方法終止連接。

實(shí)例:

ws.send("Hello WebSocket!");

B、close ()方法：

使用close()方法，可以關(guān)閉WebSocket連接或者終止連接嘗試。如果連接已經(jīng)關(guān)閉，該方法就什么都不做。在調(diào)用close()之后，不能在已經(jīng)關(guān)閉的WebSocket上發(fā)送任何數(shù)據(jù)。可以向close()方法傳遞兩個(gè)可選參數(shù)：code（數(shù)字型的狀態(tài)代碼）和reason（一個(gè)文本字符串）。傳遞這些參數(shù)能夠向服務(wù)器傳遞關(guān)于客戶關(guān)閉連接原因的信息。

注：以上是對(duì) WebSocket的簡(jiǎn)單介紹，下面將用一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)實(shí)時(shí)聊天案例來(lái)介紹如何使用WebSocket

A:首先新建一個(gè)項(xiàng)目我這里叫chatroom，在建一個(gè)包然后新建一個(gè)類(lèi)用于實(shí)現(xiàn)服務(wù)器端的連接我的類(lèi)名叫ChatWebSocketServlet.Java;

具體項(xiàng)目搭建如下圖：

這里寫(xiě)圖片描述

B:寫(xiě)服務(wù)器端實(shí)現(xiàn)類(lèi)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實(shí)現(xiàn)類(lèi)(帶內(nèi)流)，應(yīng)用程序應(yīng)當(dāng)擴(kuò)展這個(gè)類(lèi)并實(shí)現(xiàn)其抽象方法onBinaryData和onTextData。
return new ChatMessageInbound();
}
class ChatMessageInbound extends MessageInbound {
// MessageInbound：基于消息的WebSocket實(shí)現(xiàn)類(lèi)(帶內(nèi)消息)，應(yīng)用程序應(yīng)當(dāng)擴(kuò)展這個(gè)類(lèi)并實(shí)現(xiàn)其抽象方法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();
}
}
}
}
}

C:實(shí)現(xiàn)前臺(tái)頁(yè)面index.jsp（為了展示功能并沒(méi)有美化，比較簡(jiǎn)陋）具體代碼如下：

<%@ 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="發(fā)送" onclick="send(this);" disabled="disabled"
id="send_btn" title="Ctrl+Enter發(fā)送">
</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('ws://localhost:8080/chatroom/chat');
receive_text.innerHTML += "<font color=green>正在連接服務(wù)器……</font>";
//打開(kāi)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>連接斷開(kāi)！</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>

這樣一個(gè)簡(jiǎn)單的實(shí)時(shí)聊天頁(yè)面就做好了，接下來(lái)將項(xiàng)目部署到Tomcat 7.0服務(wù)器，并開(kāi)啟服務(wù)器就可以實(shí)現(xiàn)聊天了

結(jié)果展示：

1.在地址欄輸入服務(wù)器地址：

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

點(diǎn)擊連接服務(wù)器結(jié)果如下：

這里寫(xiě)圖片描述

2.分別在兩個(gè)不同的瀏覽器打開(kāi)并互相發(fā)送信息（我這里用谷歌和火狐）結(jié)果如下：

這里寫(xiě)圖片描述

以上所述是小編給大家介紹的HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡(jiǎn)單的實(shí)時(shí)聊天，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: