HTML5实现基于Tomcat 7.0的WebSocket连接并实现简单的实时聊天

1. 什么是WebSocket？

WebSocket是自然的全双工，双向，单套接字连接. 使用WebSocket，您的HTTP请求变成一个打开WebSocket连接（WebSocket或基于TLS的WebSocket（TransportLayer Security，最初称为“ SSL”））的单个请求，并重复使用客户端到服务器和服务器到客户端的相同连接. WebSocket减少了延迟，因为一旦建立了WebSocket连接，服务器就可以在可用时发送消息. 例如，与轮询不同，WebSocket仅发出一个请求. 服务器不需要等待客户端的请求. 同样，客户端可以随时将消息发送到服务器. 与轮询相比，无论消息是否可用，都会每隔一段时间发送一次请求，并且单个请求可以大大减少延迟.

2，WebSocket API

WebSocket API使您可以通过Web在客户端应用程序和服务器端进程之间建立全双工双向通信. WebSocket接口规定了可用于客户端的方法以及客户端与网络的交互方式.

3. WebSocket构造函数

要建立与服务器的WebSocket连接，请使用WebSocket接口通过指向表示要连接的端点的URL来实例化WebSocket对象. WebSocket协议定义了两个URL方案（ws和wss），分别用于客户端和服务器之间的未加密和加密通信.

示例: var ws = new WebSocket（“ ws: //www.websocket.org”）;

4. WebSocket事件

WebSocket API完全是事件驱动的. 应用程序代码侦听WebSocket对象上的事件，以便处理输入数据和连接状态更改. WebSocket协议也是事件驱动的.

WebSocket对象调度4个不同的事件:

A，公开活动:

服务器响应WebSocket连接请求后，打开事件将触发并建立连接. 与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('websocked error');
handerError();
}

D，关闭事件:

The

当WebSocket连接关闭时websocket实现单聊，将触发

close事件. 与close事件对应的回调函数是onclose.

示例:

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

5. WebSocket方法

WebSocket对象有两种方法: send（）和close（）.

A，send（）方法:

使用WebSocket在客户端和服务器之间建立全双工双向连接后，可以在连接打开时调用send（）方法. 使用send（）方法将消息从客户端发送到服务器. 发送一条或多条消息后websocket实现单聊，您可以保持连接打开，或调用close（）方法终止连接.

示例:

ws.send("Hello WebSocket!");

B，close（）方法:

使用close（）方法，可以关闭WebSocket连接或终止连接尝试. 如果连接已关闭，则此方法不执行任何操作. 调用close（）之后，您将无法在关闭的WebSocket上发送任何数据. 可以将两个可选参数传递给close（）方法: 代码（数字状态码）和原因（文本字符串）. 传递这些参数可以将有关客户端为何关闭连接的信息传递给服务器.

注意: 上面是对WebSocket的简要介绍，下面将使用一个简单的网页实时聊天案例介绍如何使用WebSocket

A: 首先，创建一个新项目. 我称它为. 我正在构建一个程序包，然后创建一个新类来实现服务器端连接. 我的班级名称是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();
}
}
}
}
}

C: 实现首页index.jsp（以示功能未美化，相对简单），具体代码如下:

<%@ 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('ws://localhost:8080/chatroom/chat');
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. 在地址栏中输入服务器地址:

: 8080 // index.jsp

单击以连接到服务器，结果如下:

2. 在两个不同的浏览器中打开并相互发送消息（我在这里使用Google和Firefox），结果如下:

以上是编辑器向基于Tomcat 7.0的所有人介绍的HTML5，以实现WebSocket连接并实现简单的实时聊天. 希望对大家有帮助. 如果您有任何疑问，请给我留言，编辑会及时答复您. 非常感谢您对Script House网站的支持！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-228990-1.html