文档章节

HTML5 WebSocket JavaWeb 实现简单的聊天室功能

智慧点点
 智慧点点
发布于 2018/04/23 20:27
字数 917
阅读 354
收藏 9

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

本实例使用websocket实现了即时聊天系统,websocket技术可以在网页中使用js技术完成与后台的通讯, 而后台tomcat集成了websocket功能, 只需要很少的代码就可以完成很强大的功能, 基于此聊天系统可以扩展成实时展示系统, 如网页中显示股票信息【数据实时变化】, 网页中显示交通实况信息等

本文demo下载:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1052

项目对应的实例代码可以通过【点击下载】进行下载

项目开发工具Eclipse, JDK1.7, Maven3.0.4, tomcat8 等工具也可以在【工具下载】栏目中下载

项目包含内容(见下图):

BarrageClient-master.zip 客户端源码

Barrage-master.zip 服务端源码

HTML5 WebSocket JavaWeb 实现简单的聊天室功能

介绍:

  • WebSocket是HTML5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这是“无法做到”的。

原理:

  • 客户端由HTML5 websocket监听,客户端发送长连接,后台请求阻塞实现服务端消息实时更新.

  • 服务端获得当前连接中的所有请求ID,实时推送消息.

首先上最终结果图:

张三聊天界面:

HTML5 WebSocket JavaWeb 实现简单的聊天室功能

李四聊天界面:

HTML5 WebSocket JavaWeb 实现简单的聊天室功能

页面样式用的bootstrap简单的画了一下

客户端的目录结构:

HTML5 WebSocket JavaWeb 实现简单的聊天室功能

客户端一共就三个文件,主要是index.htmlindex.jscore.js里面只写了一些工具方法

下面上index.js的代码也就是客户端的实现:

ws://127.0.0.1:8080/barrage/init 这是连接后台的固定写法

ws为前缀, 127.0.0.1为ip地址 8080为tomcat提供的服务端口 barrage为项目名称

init 为后台对应的@ServerEndpoint("/init")

var socket = new WebSocket("ws://127.0.0.1:8080/barrage/init");$(function() {listen();})function emit() {var text = encodeScript($("#msg").val());var msg = {"message" : text,"color" : "#CECECE","bubbleColor" : "#2E2E2E","fontSize" : "12","fontType" : "黑体"};msg = JSON.stringify(msg);socket.send(msg);$("#content").append("<kbd style='color: #" + "CECECE" + ";float: right; font-size: " + 12 + ";'>" + text + "</kbd><br/>");$("#msg").val("");}function listen() {socket.onopen = function() {$("#content").append("<kbd>Welcome!</kbd></br>");};socket.onmessage = function(evt) {var data = JSON.parse(evt.data);$("#content").append("<kbd style='color: #" + data.color + ";font-size: " + data.fontSize + ";margin-top: 10px;'>" + data.userName + " Say: " + data.message + "</kbd></br>");};socket.onclose = function(evt) {$("#content").append("<kbd>" + "Close!" + "</kbd></br>");}socket.onerror = function(evt) {$("#content").append("<kbd>" + "ERROR!" + "</kbd></br>");}}document.onkeydown = function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode == 13){ // enter 键emit();}};

接下来是页面index.html的实现:

<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BarrageClient</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="container" style="padding-top:20px;"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Barrage</h3> </div> <div class="panel-body" id="content"></div> </div> <hr/> <input type="text" class="form-control" placeholder="msg" aria-describedby="sizing-addon1" id="msg"> <hr/> <hr/> <button type="button" class="btn btn-lg btn-success btn-block" onclick="emit()">Emit</button> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/core.js"></script> <script type="text/javascript" src="js/index.js"></script> </body></html>

core.js中的encodeScript方法

function encodeScript(data) { if(null == data || "" == data) { return ""; } return data.replace("<", "&lt;").replace(">", "&gt;");}

服务端目录结构

HTML5 WebSocket JavaWeb 实现简单的聊天室功能

服务端使用tomcat-websocket-api的jar包实现,主要是client包下面的BarrageClient类

init为对外提供服务的方法名称

前台与后台建立连接后, onOpen方法被调用

前台与后台断开连接后, onClose方法被调用

前台向后台传送消息后, onMessage会被调用, message中的数据格式为JSON

@ServerEndpoint("/init")

public class BarrageClient {

private static Logger LOG = LoggerFactory.getLogger(BarrageClient.class);

@OnOpen

public void onOpen(Session session) {

//加入用户池

UserPool.add(session);

}

@OnMessage

public void onMessage(String message, Session session) throws IOException {

LOG.info("user [" + session.getId() + "] Received: " + message);

//给所有用户发送消息

MessageProxy.getInstance().getProxy(Message.class).send(message, session);

}

@OnError

public void onError(Throwable throwable) {

LOG.error(throwable.getMessage());

}

@OnClose

public void onClose(Session session) {

//移除用户池

UserPool.remove(session.getId());

}

}

© 著作权归作者所有

智慧点点
粉丝 10
博文 70
码字总数 55879
作品 0
南京
私信 提问
使用WebSocket制作简单的聊天室

使用WebSocket制作简单的聊天室 一、功能需求 ①第一次进入聊天室,输入用户的昵称,用于聊天消息显示名称 ②用户进入系统后,系统需要提示所有用户,有新用户进入系统了 ③用户发送消息时要...

JS_HCX
2018/05/27
0
0
NODE.JS & HTML5 聊天室

最近学习了一下 HTML5 + node.js,一边学习一边做例子。 用 node.js 制作 Server 端,提供 http & webSocket 服务,其中 webSocket 使用的是 socket.io 前台采用的是 静态的html 页面,用 ht...

zTree
2012/08/14
3K
2
补习系列(20)-大话 WebSocket 与 "尬聊"的实现

[TOC] 一、聊聊 WebSocket 从HTML5技术流行至今,WebSocket已经有非常广泛的应用: 在线游戏,提供实时的操作交互体验 社交平台,与好友实时的私信对话 新闻动态,获得感兴趣的主题信息推送 ...

美码师
05/03
0
0
使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSo...

lyg945
2014/08/27
1K
3
应用 HTML5 的 WebSocket 实现 BiDirection 数据交换

HTML5 是新一代的 Web 标准。虽然 HTML5 标准还没有最终确定但是它已然成为主流,各大厂商都开始提前实现其草案中的功能。HTML5 提供了很多新特征,比如 Canvas、离线存储、多线程、视频标签...

IBMdW
2012/01/04
2.6K
6

没有更多内容

加载失败,请刷新页面

加载更多

初始 Kafka Consumer 消费者

>温馨提示:整个 Kafka 专栏基于 kafka-2.2.1 版本。 1、KafkaConsumer 概述 根据 KafkaConsumer 类上的注释上来看 KafkaConsumer 具有如下特征: 在 Kafka 中 KafkaConsumer 是线程不安全的...

中间件兴趣圈
10分钟前
4
0
用于更新和删除的HTTP状态代码?

我应该为UPDATE ( PUT )和DELETE设置什么状态代码(例如产品成功更新)? #1楼 除了200和204之外, 205(重置内容)可能是有效的响应。 服务器已经完成了请求,用户代理应该重置文档视图,...

技术盛宴
18分钟前
3
0
shell脚本——linux下自动备份文件夹

新建一个脚本文件,将脚本代码复制进去 vim backup.shchmod +x backup.sh 将脚本文件放到要备份的文件夹下,执行脚本./backup.sh 1 & ,代表每1个小时备份一次 # !/bin/bash#-------...

Jugier
20分钟前
3
0
如何使用jQuery设置/取消设置Cookie?

如何使用jQuery设置和取消设置cookie,例如创建一个名为test的cookie并将其值设置为1 ? #1楼 2019年4月更新 Cookie的读取/操作不需要jQuery,因此请不要使用下面的原始答案。 转到https://g...

javail
34分钟前
4
0
TCP四次挥手详情

建立连接非常重要,它是数据正确传输的前提;断开连接同样重要,它让计算机释放不再使用的资源。如果连接不能正常断开,不仅会造成数据传输错误,还会导致套接字不能关闭,持续占用资源,如果...

vinci321
35分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部