java web 在线聊天的基本实现
随着互联网的发展,http的协议有些时候不能满足需求,比如在现聊天的实现.如果使用http协议必须轮训,或者使用长链接.必须要一个request,这样后台才能发送信息到前端.
后台不能主动找客户端通信.而且每次请求heard都带有很多的信息.这样也很占用宽带.这是websocket.
因为主要是为了学习,所以前台很粗糙.没有css.
1.后台实现
后台一共有两个类 一个是个imessage类,就是一个信息的bean.另一个类是socket,这个类主要是处理信息的发送.
Message.java如下:
package com.socket;
public class Message {
private String id;
private String msg;
private String from;
private String to;
public String getFrom() {
return from;
}
public void setFrom(String from) {
this.from = from;
}
public String getTo() {
return to;
}
public void setTo(String to) {
this.to = to;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
socket.Java代码如下:
package com.socket; import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.Set; import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint; import com.google.gson.Gson; @ServerEndpoint("/websocket")
public class Socket {
public static Map<String, Session> sessionMap = new HashMap<String, Session>();
private Session session; @OnOpen
public void startSocket(Session session) {
this.session = session;
System.out.println("链接成功");
if (sessionMap.size() == 0) {
return ;
}
Set userIds = sessionMap.keySet();
StringBuffer sBuffer = new StringBuffer();
for (Object str : userIds) {
sBuffer.append(str.toString() + ":");
}
Gson gson = new Gson();
try {
Message message = new Message();
message.setFrom("系统");
message.setMsg(sBuffer.toString());
session.getBasicRemote().sendText(gson.toJson(message),true);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} @OnMessage
public void getMessgae(Session session, String str, boolean last) {
if (session.isOpen()) {
try {
System.out.println(str);
Gson gson = new Gson();
Message msg = gson.fromJson(str, Message.class);
Message toMessage = msg;
toMessage.setFrom(msg.getId());
toMessage.setTo(msg.getTo()); if (msg.getMsg().equals("newUser")) {
if (sessionMap.containsKey(msg.getId())) {
sessionMap.remove(msg.getId());
}
sessionMap.put(msg.getId(), session);
} else {
Session toSession = sessionMap.get(msg.getTo());
if (toSession != null && toSession.isOpen()) {
toSession.getBasicRemote().sendText(gson.toJson(toMessage).toString(), last);
} else {
toMessage.setMsg("用户不存在");
toMessage.setFrom("系统");
session.getBasicRemote().sendText(gson.toJson(toMessage).toString(), last);
}
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} } else {
System.out.println("session is closed");
}
}
}
2 前端代码
前台主要使用的是Jquery库来操作一些dom. 后台开启的是 8889端口，所以前端要调用 ws://localhost:8889/webChat/websocket，如果自己实现请改自己的端口
js和html如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test WebSocket</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
var url = "ws://localhost:8889/webChat/websocket";
var ws = "";
var message ={"id":"","msg":"","form":"","to":""};
function connection() {
ws = new WebSocket(url);
console.log("connection.......");
ws.onmessage = function (e){
var json = eval('(' + e.data.toString() + ')');
showMessage(json.from +":"+ json.msg);
}
ws.onclose = function() {
showMessage("close");
}
ws.onerror = function (e){
showMessage("error");
}
ws.onopen = function() {
showMessage("链接成功")
message.id = $(".identity").val();
message.msg = "newUser";
console.log(JSON.stringify(message));
ws.send(JSON.stringify(message));
message.msg = ""; }
} $(".start-conn-btn").click(function() {
connection();
});
$(".send-btn").click(function() {//send message
message.to = $(".to-user").val();
message.msg = $(".msg-context").val();
$(".msg-context").val("");
ws.send(JSON.stringify(message));
showMessage( "我:" + message.msg );
message.msg = ""; }); function showMessage(msg) {
$(".show-message").append( msg + "<br/>"); } }); </script>
</head>
<body>
<div class="container">
<div calss="item">
<span>ID:</span>
<input type="text" class="identity">
<button class="start-conn-btn" >链接</button>
<span>toUser:</span>
<input type="text" class="to-user">
</div>
<div class="show-message"> </div>
<div calss="item">
<span>内容:</span>
<textarea class="msg-context"></textarea>
</div>
<div><button class="send-btn">send</button></div>
</div>
</body> </html>
以上的这些就是简单的实现一个在线web聊天.
java web 在线聊天的基本实现的更多相关文章
- 基于Java的在线聊天室
概述 Java socket编程,实现一个在线聊天室, 实现在线用户群聊,私聊,发送文件等功能. 详细 代码下载:http://www.demodashi.com/demo/13623.html 一. ...
- 基于 NodeJs 打造 Web 在线聊天室
Socket.IO 简介与基础环境搭建 任务时间:10min ~ 20min 关于 Socket.IO Socket.IO 可以实现在浏览器和服务器之间实时双向通信,本节课程将详细介绍 Socket. ...
- 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室
一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...
- java web 在线编辑Excel -- x-spreadsheet
--- x-spreadsheet --- 文档 https://hondrytravis.com/x-spreadsheet-doc/ <%@ page language="java ...
- web 在线聊天的基本实现
参考:https://www.cnblogs.com/guoke-jsp/p/6047496.html
- atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php
atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 .打开浏览服务器文件夹java .net php 1. 环境:::项目java web,需要打开浏览服 ...
- 基于Server-Sent Event的简单聊天室 Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...
- java Socket实现简单在线聊天（三）
在上一篇,利用线程使服务端实现了能够接收多客户端请求的功能,这里便需要客户端接收多客户端消息的同时还能把消息转发到每个连接的客户端,并且客户端要能在内容显示区域显示出来,从而实现简单的在线群聊. 在实 ...
- java Socket实现简单在线聊天（二）
接<java Socket实现简单在线聊天(一)>,在单客户端连接的基础上,这里第二步需要实现多客户端的连接,也就需要使用到线程.每当有一个新的客户端连接上来,服务端便需要新启动一个线程进 ...
随机推荐
- PBCS项目总结
PBCS项目已经成功地Product,终于可以缓解一下紧张的心情,最近连续四五个月紧张地工作,头都要大了.如今比较清闲,是时候总结一下整个项目了.(古人云:成功在于总结嘛) 整个项目是二个人开发的,由 ...
- 用python-webdriver实现自动填表
在日常工作中常常需要重复填写某些表单,如果人工完成,费时费力,而且网络延迟令人十分崩溃.如果能够用程序实现自动填表,效率可以提高一倍以上,并且能够移植到多台计算机,进一步提高工作效率.webdrive ...
- subclipse下svn: E200015: authentication cancelled问题的解决
今天要把新建的一个项目要share到一个Ubuntu下SVN服务上,总是让我不断的重复输入密码,实在是太要命了,点取消就报错如标题,Google了一下,最后在后面参考那篇帖子的启发下,到SVN配置里面 ...
- 关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
- java之Spring（IOC）装配Bean（手动装配、自动装配、注解装配）
在上一篇控制反转中我们看到了依靠一个Bean文件来实现对代码的控制,可谓十分便捷,再也不用去实例化对象了,2333~~~ 1.手动装配 <bean id="todo" cla ...
- manifold tangent classifier
The Manifold Tangent Classifier (MTC) Putting it all together, here is the high level summary of how ...
- Leetcode_删除排序数组中的重复项
Leetcode 删除排序数组中的重复项 题目: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用 额外的数组空间,你必须在原地修改输入数 ...
- quick-cocos2d-x与 cocos2d-x的关系
quick-cocos2d-x(后文简称 quick)与 cocos2d-x 的关系,用一句话概括:quick 是 cocos2d-x 针对 Lua 的豪华套装威力加强版. 那 quick 与 coc ...
- Avio红外热像仪在汽车行业的应用
红外热像仪利用红外探测器接受被测目标的红外辐射能量,将红外辐射能量转换成带有温度信息的图像信号,并通过显视屏等显示工具显示红外热图像.这种红外热图像与物体表面的温度分布相对应.红外热像仪能够将探测到的 ...
- DX11 Without DirectX SDK--04 使用DirectX Tool Kit帮助开发
回到 DirectX11--使用Windows SDK来进行开发 DirectX Tool Kit下载 DirectX Tool Kit是一个包含许多类的集合,用于为公共Windows平台编写Dire ...