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


Posted in Javascript onOctober 31, 2016

1、什么是WebSocket?

WebSocket 是一种自然的全双工、双向、单套接字连接。使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSocket over TLS(TransportLayer Security,传输层安全性,原称“SSL”))的单一请求,并且重用从客户端到服务器以及服务器到客户端的同一连接。WebSocket 减少了延迟,因为一旦建立起WebSocket 连接,服务器可以在消息可用时发送它们。例如,和轮询不同,WebSocket只发出一个请求。服务器不需要等待来自客户端的请求。相似地,客户端可以在任何时候向服务器发送消息。相比轮询不管是否有可用消息,每隔一段时间都发送一个请求,单一请求大大减少了延迟。

2、WebSocket API

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

3、WebSocket构造函数

为了建立到服务器的WebSocket连接,使用WebSocket接口,通过指向一个代表所要连接端点的URL,实例化一个WebSocket对象。WebSocket 协议定义了两种URL方案(URL scheme)—ws和wss,分别用于客户端和服务器之间的非加密与加密流量。

实例: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、messagess事件:

message事件在接收到消息时触发,对应于该事件的回调函数是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、error事件:

error 事件在响应意外故障的时候触发。与该事件对应的回调函数为onerror。
实例:

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

D、close事件:

close 事件在WebSocket 连接关闭时触发。对应于close 事件的回调函数是onclose。

实例:

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

5、WebSocket方法

WebSocket 对象有两个方法:send() 和close()。

A、 send() 方法:

使用WebSocket在客户端和服务器之间建立全双工双向连接后,就可以在连接打开时调用send() 方法。使用send() 方法可以从客户端向服务器发送消息。在发送一条或者多条消息之后,可以保持连接打开,或者调用close() 方法终止连接。

实例:

ws.send("Hello WebSocket!");

B、close ()方法:

使用close()方法,可以关闭WebSocket连接或者终止连接尝试。如果连接已经关闭,该方法就什么都不做。在调用close()之后,不能在已经关闭的WebSocket上发送任何数据。可以向close()方法传递两个可选参数:code(数字型的状态代码)和reason(一个文本字符串)。传递这些参数能够向服务器传递关于客户关闭连接原因的信息。

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

A:首先新建一个项目我这里叫chatroom,在建一个包然后新建一个类用于实现服务器端的连接我的类名叫ChatWebSocketServlet.Java;

具体项目搭建如下图:

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

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.在地址栏输入服务器地址:

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

点击连接服务器结果如下:

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

2.分别在两个不同的浏览器打开并互相发送信息(我这里用谷歌和火狐)结果如下:

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

以上所述是小编给大家介绍的HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript编码的几个方法详细介绍
Jan 06 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
详解JS面向对象编程
Jan 24 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 #Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 #Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 #Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 #Javascript
js学习笔记之事件处理模型
Oct 31 #Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 #Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 #Javascript
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
javascript引导程序
2008/10/26 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python装饰器原理与用法深入详解
2019/12/19 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
运行Python编写的程序方法实例
2020/10/21 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
车间统计员岗位职责
2014/01/05 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
护理见习报告范文
2014/11/03 职场文书
预备党员考察意见范文
2015/06/01 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
安全生产培训心得体会
2016/01/18 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python