前言
html5 websocket实现了服务器与浏览器的双向通讯，双向通讯使服务器消息推送开发更加简单，最常见的就是即时通讯和对信息实时性要求比较高的应用。以前的服务器消息推送大部分采用的都是“轮询”和“长连接”技术，这两中技术都会对服务器产生相当大的开销，而且实时性不是特别高。websocket技术对只会产生很小的开销，并且实时性特别高。下面就开始讲解如何利用websocket技术开发聊天室。在这个实例中，采用的是tomcat7服务器，每个服务器对于websocket的实现都是不一样的，所以这个实例只能在tomcat服务器中运行，不过目前spring已经推出了websocket的api，能够兼容各个服务器的实现，大家可以查阅相关的资料进行了解，在这里就不介绍了，下图是聊天室的效果图：
在这里实例中，实现了消息的实时推送，还实现了聊天用户的上下线通知。下面就开始具体讲解如何实现。
后台处理
tomcat实现websocket的主要是依靠org.apache.catalina.websocket.messageinbound这个类，这个类的在{tomcat_home}/lib/catalina.jar中，所以你开发的时候需要将catalina.jar和tomcat-coyote.jar引入进来，下面这段代码就是暴露给客户端连接地址的servlet：
我要评论
package com.ibcio;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservletrequest;
import org.apache.catalina.websocket.streaminbound;
@webservlet(urlpatterns = { "/message"})
//如果要接收浏览器的ws://协议的请求就必须实现websocketservlet这个类
public class websocketmessageservlet extends org.apache.catalina.websocket.websocketservlet {
private static final long serialversionuid = 1l;
public static int online_user_count = 1;
public string getuser(httpservletrequest request){
return (string) request.getsession().getattribute("user");
}
//跟平常servlet不同的是，需要实现createwebsocketinbound，在这里初始化自定义的websocket连接对象
@override
protected streaminbound createwebsocketinbound(string subprotocol,httpservletrequest request) {
return new websocketmessageinbound(this.getuser(request));
}
}
这个servlet跟普通的servlet有些不同，继承的websocketservlet类，并且要重写createwebsocketinbound方法。这个类中session中的user属性是用户进入index.jsp的时候设置的，记录当前用户的昵称。下面就是自己实现的websocket连接对象类websocketmessageinbound类的代码：
package com.ibcio;
import java.io.ioexception;
import java.nio.bytebuffer;
import java.nio.charbuffer;
import net.sf.json.jsonobject;
import org.apache.catalina.websocket.messageinbound;
import org.apache.catalina.websocket.wsoutbound;
public class websocketmessageinbound extends messageinbound {
//当前连接的用户名称
private final string user;
public websocketmessageinbound(string user) {
this.user = user;
}
public string getuser() {
return this.user;
}
//建立连接的触发的事件
@override
protected void onopen(wsoutbound outbound) {
// 触发连接事件，在连接池中添加连接
jsonobject result = new jsonobject();
result.element("type", "user_join");
result.element("user", this.user);
//向所有在线用户推送当前用户上线的消息
websocketmessageinboundpool.sendmessage(result.tostring());
result = new jsonobject();
result.element("type", "get_online_user");
result.element("list", websocketmessageinboundpool.getonlineuser());
//向连接池添加当前的连接对象
websocketmessageinboundpool.addmessageinbound(this);
//向当前连接发送当前在线用户的列表
websocketmessageinboundpool.sendmessagetouser(this.user, result.tostring());
}
@override
protected void onclose(int status) {
// 触发关闭事件，在连接池中移除连接
websocketmessageinboundpool.removemessageinbound(this);
jsonobject result = new jsonobject();
result.element("type", "user_leave");
result.element("user", this.user);
//向在线用户发送当前用户退出的消息
websocketmessageinboundpool.sendmessage(result.tostring());
}
@override
protected void onbinarymessage(bytebuffer message) throws ioexception {
throw new unsupportedoperationexception("binary message not supported.");
}
//客户端发送消息到服务器时触发事件
@override
protected void ontextmessage(charbuffer message) throws ioexception {
//向所有在线用户发送消息
websocketmessageinboundpool.sendmessage(message.tostring());
}
}
代码中的主要实现了onopen、onclose、ontextmessage方法，分别处理用户上线、下线、发送消息。在这个类中有个websocketmessageinboundpool连接池类，这个类是用来管理目前在线的用户的连接，下面是这个类的代码：
package com.ibcio;
import java.io.ioexception;
import java.nio.charbuffer;
import java.util.hashmap;
import java.util.map;
import java.util.set;
public class websocketmessageinboundpool {
//保存连接的map容器
private static final map<string,websocketmessageinbound > connections = new hashmap<string,websocketmessageinbound>();
//向连接池中添加连接
public static void addmessageinbound(websocketmessageinbound inbound){
//添加连接
system.out.println("user : " + inbound.getuser() + " join..");
connections.put(inbound.getuser(), inbound);
}
//获取所有的在线用户
public static set<string> getonlineuser(){
return connections.keyset();
}
public static void removemessageinbound(websocketmessageinbound inbound){
//移除连接
system.out.println("user : " + inbound.getuser() + " exit..");
connections.remove(inbound.getuser());
}
public static void sendmessagetouser(string user,string message){
try {
//向特定的用户发送数据
system.out.println("send message to user : " + user + " ,message content : " + message);
websocketmessageinbound inbound = connections.get(user);
if(inbound != null){
inbound.getwsoutbound().writetextmessage(charbuffer.wrap(message));
}
} catch (ioexception e) {
e.printstacktrace();
}
}
//向所有的用户发送消息
public static void sendmessage(string message){
try {
set<string> keyset = connections.keyset();
for (string key : keyset) {
websocketmessageinbound inbound = connections.get(key);
if(inbound != null){
system.out.println("send message to user : " + key + " ,message content : " + message);
inbound.getwsoutbound().writetextmessage(charbuffer.wrap(message));
}
}
} catch (ioexception e) {
e.printstacktrace();
}
}
}
前台展示
上面的代码就是聊天室后台的代码，主要是由3个对象组成，servlet、连接对象、连接池，下面就是前台的代码，前台的代码主要是实现与服务器进行连接，展示用户列表及信息列表，前台的展示使用了ext框架，不熟悉ext的同学可以初步的了解下ext，下面的是index.jsp的代码：
<%@ page language="java" pageencoding="utf-8" import="com.ibcio.websocketmessageservlet"%>
<%
string user = (string)session.getattribute("user");
if(user == null){
//为用户生成昵称
user = "游客" + websocketmessageservlet.online_user_count;
websocketmessageservlet.online_user_count ++;
session.setattribute("user", user);
}
pagecontext.setattribute("user", user);
%>
<html>
<head>
<title>websocket 聊天室</title>
<!-- 引入css文件 -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ext4/shared/example.css" />
<link rel="stylesheet" type="text/css" href="css/websocket.css" />
<!-- 映入ext的js开发包，及自己实现的webscoket. -->
<script type="text/javascript" src="ext4/ext-all-debug.js"></script>
<script type="text/javascript" src="websocket.js"></script>
<script type="text/javascript">
var user = "${user}";
</script>
</head>
<body>
<h1>websocket聊天室</h1>
<p>通过html5标准提供的api与ext富客户端框架相结合起来，实现聊天室，有以下特点：</p>
<ul class="feature-list" style="padding-left: 10px;">
<li>实时获取数据，由服务器推送，实现即时通讯</li>
<li>利用websocket完成数据通讯，区别于轮询，长连接等技术，节省服务器资源</li>
<li>结合ext进行页面展示</li>
<li>用户上线下线通知</li>
</ul>
<div id="websocket_button"></div>
</body>
</html>
页面的展示主要是在websocket.js中进行控制，下面是websocket.jsd的代码：
//用于展示用户的聊天信息
ext.define('messagecontainer', {
extend : 'ext.view.view',
trackover : true,
multiselect : false,
itemcls : 'l-im-message',
itemselector : 'div.l-im-message',
overitemcls : 'l-im-message-over',
selecteditemcls : 'l-im-message-selected',
style : {
overflow : 'auto',
backgroundcolor : '#fff'
},
tpl : [
'<div class="l-im-message-warn">交谈中请勿轻信汇款、中奖信息、陌生电话。 请遵守相关法律法规。</div>',
'<tpl for=".">',
'<div class="l-im-message">',
'<div class="l-im-message-header l-im-message-header-{source}">{from} {timestamp}</div>',
'<div class="l-im-message-body">{content}</div>', '</div>',
'</tpl>'],
messages : [],
initcomponent : function() {
var me = this;
me.messagemodel = ext.define('leetop.im.messagemodel', {
extend : 'ext.data.model',
fields : ['from', 'timestamp', 'content', 'source']
});
me.store = ext.create('ext.data.store', {
model : 'leetop.im.messagemodel',
data : me.messages
});
me.callparent();
},
//将服务器推送的信息展示到页面中
receive : function(message) {
var me = this;
message['timestamp'] = ext.date.format(new date(message['timestamp']),
'h:i:s');
if(message.from == user){
message.source = 'self';
}else{
message.source = 'remote';
}
me.store.add(message);
if (me.el.dom) {
me.el.dom.scrolltop = me.el.dom.scrollheight;
}
}
});
这段代码主要是实现了展示消息的容器，下面就是页面加载完成后开始执行的代码：
ext.onready(function() {
//创建用户输入框
var input = ext.create('ext.form.field.htmleditor', {
region : 'south',
height : 120,
enablefont : false,
enablesourceedit : false,
enablealignments : false,
listeners : {
initialize : function() {
ext.eventmanager.on(me.input.getdoc(), {
keyup : function(e) {
if (e.ctrlkey === true
&& e.keycode == 13) {
e.preventdefault();
e.stoppropagation();
send();
}
}
});
}
}
});
//创建消息展示容器
var output = ext.create('messagecontainer', {
region : 'center'
});
var dialog = ext.create('ext.panel.panel', {
region : 'center',
layout : 'border',
items : [input, output],
buttons : [{
text : '发送',
handler : send
}]
});
var websocket;
//初始话websocket
function initwebsocket() {
if (window.websocket) {
websocket = new websocket(encodeuri('ws://localhost:8080/websocket/message'));
websocket.onopen = function() {
//连接成功
win.settitle(title + ' (已连接)');
}
websocket.onerror = function() {
//连接失败
win.settitle(title + ' (连接发生错误)');
}
websocket.onclose = function() {
//连接断开
win.settitle(title + ' (已经断开连接)');
}
//消息接收
websocket.onmessage = function(message) {
var message = json.parse(message.data);
//接收用户发送的消息
if (message.type == 'message') {
output.receive(message);
} else if (message.type == 'get_online_user') {
//获取在线用户列表
var root = onlineuser.getrootnode();
ext.each(message.list,function(user){
var node = root.createnode({
id : user,
text : user,
iconcls : 'user',
leaf : true
});
root.appendchild(node);
});
} else if (message.type == 'user_join') {
//用户上线
var root = onlineuser.getrootnode();
var user = message.user;
var node = root.createnode({
id : user,
text : user,
iconcls : 'user',
leaf : true
});
root.appendchild(node);
} else if (message.type == 'user_leave') {
//用户下线
var root = onlineuser.getrootnode();
var user = message.user;
var node = root.findchild('id',user);
root.removechild(node);
}
}
}
};
//在线用户树
var onlineuser = ext.create('ext.tree.panel', {
title : '在线用户',
rootvisible : false,
region : 'east',
width : 150,
lines : false,
usearrows : true,
autoscroll : true,
split : true,
iconcls : 'user-online',
store : ext.create('ext.data.treestore', {
root : {
text : '在线用户',
expanded : true,
children : []
}
})
});
var title = '欢迎您：' + user;
//展示窗口
var win = ext.create('ext.window.window', {
title : title + ' (未连接)',
layout : 'border',
iconcls : 'user-win',
minwidth : 650,
minheight : 460,
width : 650,
animatetarget : 'websocket_button',
height : 460,
items : [dialog,onlineuser],
border : false,
listeners : {
render : function() {
initwebsocket();
}
}
});
win.show();
//发送消息
function send() {
var message = {};
if (websocket != null) {
if (input.getvalue()) {
ext.apply(message, {
from : user,
content : input.getvalue(),
timestamp : new date().gettime(),
type : 'message'
});
websocket.send(json.stringify(message));
//output.receive(message);
input.setvalue('');
}
} else {
ext.msg.alert('提示', '您已经掉线，无法发送消息!');
}
}
});
上面的代码就是页面完成加载后自动连接服务器，并创建展示界面的代码。
注意
需要注意的两点，在部署完成之后需要将在tomcat应用目录中的lib目录下的catalina.jar和tomcat-coyote.jar删掉，比如项目的lib目录在d:\workspace\websocket\webroot\web-inf\lib，而部署的应用lib目录是在d:\tools\apache-tomcat-7.0.32\webapps\websocket\web-inf\lib，删掉部署目录的lib目录中连两个jar就可以了，否则会包could not initialize class com.ibcio.websocketmessageservlet错误，切记。
如果还是无法建立连接，请下载最新的tomcat，忘了是那个版本的tomcatcreatewebsocketinbound是没有request参数的，现在的这个代码是有这个参数了，7.0.3xx版本都是带这个参数的，切记。
总结
使用websocket开发服务器推送非常方便，这个是个简单的应用，其实还可以结合webrtc实现视频聊天和语音聊天。
实例下载
下载地址：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Error: Avoided redundant navigation to current location: “/XXX“.的问题
Avoided redundant navigation to current location:
荐 四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能（完成篇）
网友评论