JAVA WebSocKet ( 简单的聊天室 )
1, 前端代码 登入页 -> login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天室登入接口</title>
<script type="text/javascript" src="JavaScript/jQuery.js"></script>
</head>
<body>
请输入账号名: <input id="UserName" type="text" value="">
<input id="Submit" type="submit" value="登入">
</body>
<script type="text/javascript">
$('#Submit').on('click', function(){
var userName = $('#UserName').val().trim();
if(userName == ''){
console.error("账号名不能为空")
return;
}
location.href = "ChatRoom.html?UserName=" + userName;
});
</script>
</html>
2, 前端代码 聊天页面 -> ChatRoom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天室</title>
<script type="text/javascript" src="JavaScript/jQuery.js"></script>
<style type="text/css">
*{ margin: 0; padding: 0; outline: none; border: none; float: left;}
#Chat{
width: 800px;
height: 600px;
border: 1px solid #000000;
margin: 20px 0 0 20px;
}
#Content{
width: 600px;
height: 400px;
overflow-y: scroll;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.ContentList{
width: 100%;
border-bottom: 1px solid #CCC;
padding: 5px 0 10px 0;
}
.User{
width: 30%;
line-height: 20px;
font-size: 16px;
color: red;
text-indent: 10px;
}
.Time{
width: 70%;
line-height: 20px;
font-size: 14px;
text-indent: 10px;
}
.Text{
margin: 8px 0 0 0;
width: 100%;
line-height: 20px;
font-size: 14px;
text-indent: 28px;
}
#UserList{
border-bottom: 1px solid black;
height: 400px;
width: 199px;
overflow-y: scroll;
}
#UserList > div{
width: 100%;
line-height: 28px;
font-size: 16px;
text-indent: 32px;
color: green;
border-bottom: 1px solid #CCC;
}
#InputFrame{
width: 800px;
height: 199px;
}
.input{
width: 98%;
height: 169px;
display: block;
line-height: 30px;
font-size: 18px;
font-weight: bold;
padding: 0 0 0 2%;
border-bottom: 1px solid #CCC;
}
.submit{
width: 100px;
height: 29px;
padding: 5px;
float: right;
margin: 0 0 0 10px;
}
</style>
</head>
<body>
<div id="Chat">
<div id="Content"> </div>
<div id="UserList"> </div>
<div id="InputFrame">
<textarea class="input"></textarea>
<input class="submit" type="button" value="发送">
<input class="submit" type="button" value="取消">
</div>
</div>
</body>
<script type="text/javascript">
// GET 传值的获取方法
(function($){
var url = location.search.substring(1);
var atr = url.split('&');
var value = {};
for(var i = 0; i < atr.length; i ++){
value[atr[i].split('=')[0]] = decodeURIComponent(atr[i].split('=')[1]);
}
$.extend({
GetUrlValue : function(key){
return value[key];
}
});
})(jQuery); // 创建 WebSocket 的方法
function createWebSocket(urlValue){
if("WebSocket" in window){
return new WebSocket(urlValue);
}
if ("MozWebSocket" in window){
return new MozWebSocket(urlValue);
}
console.error("浏览器不支持 WebSocKet");
} // 构建请求的地址
var requestUrl = "ws://192.168.0.103/WebTest/ChatRoomForWebSocket?UserName=" + $.GetUrlValue("UserName");
var webSocket = createWebSocket(requestUrl);
webSocket.onmessage = function(e){
console.log(e.data);
if(e.data == "error"){
alert("用户名已经被占用,请重新登入!");
location.href = "Login.html";
}
e = $.parseJSON(e.data);
if(e.type == '0'){
var data = e.data;
var str = "";
for(var i = 0; i < data.length; i++){
str += '<div>'+ data[i].name +'</div>';
}
$('#UserList').html(str);
}
if(e.type == '1'){
var data = e.data;
var str = '<div class="ContentList">';
str += '<div class="User">'+ data.name +'</div>';
str += '<div class="Time">'+ data.time +'</div>';
str += '<div class="Text">'+ data.msg +'</div>';
str += '</div>';
$('#Content').append(str);
}
} $('.submit').on('click', function(){
var inputValue = $(this).val();
if(inputValue == "发送"){
var sendValue = $('.input').val().trim();
if(sendValue == ''){
alert("发送内容不能为空");
} else {
// 将换行符替换为 <br> 标签
sendValue = sendValue.replace(/\n/g, "<br>");
webSocket.send(sendValue);
}
}
$('.input').val('');
});
</script>
</html>
3, JAVA后台处理代码 WebSocket需要配置才能起作用,
如何配置请参考另一篇 http://www.cnblogs.com/lovling/p/6716612.html
package socket_web; import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List; import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint; @ServerEndpoint("/ChatRoomForWebSocket")
public class ChatRoomForWebSocket {
public static List<String> userNames = new ArrayList<String>();
public static List<Session> sessions = new ArrayList<Session>(); @OnOpen
public void open(Session session) {
try {
String userName = session.getQueryString();
userName = userName.split("=")[1];
userName = URLDecoder.decode(userName, "utf-8"); if (userNames.contains(userName)) {
session.getBasicRemote().sendText("error");
} else {
userNames.add(userName);
sessions.add(session);
String msg = "{\"type\":0, \"data\":[" + jsonName() + "]}";
pushMsg(msg);
}
System.out.println(userName + " 登入了");
} catch (Exception e) {
e.printStackTrace();
}
} @OnClose
public void close(Session session) {
try {
String userName = session.getQueryString();
userName = userName.split("=")[1];
userName = URLDecoder.decode(userName, "utf-8");
if (sessions.contains(session)){
userNames.remove(userName);
sessions.remove(session);
}
String msg = "{\"type\":0, \"data\":[" + jsonName() + "]}";
pushMsg(msg);
} catch (Exception e) {
System.out.println("关闭失败");
}
} @OnMessage
public void message(Session session, String msg) {
try {
String userName = session.getQueryString();
userName = userName.split("=")[1];
userName = URLDecoder.decode(userName, "utf-8");
Date date = new Date();
SimpleDateFormat timeFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String time = timeFormat.format(date);
msg = "{\"type\":1, \"data\":{\"name\":\"" + userName + "\", \"msg\":\"" + msg + "\",\"time\":\"" + time
+ "\" }}";
pushMsg(msg);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
} // 推送消息给所有用户
public static void pushMsg(String msg) {
try {
for (Session session : sessions) {
session.getBasicRemote().sendText(msg);
}
} catch (Exception e) {
System.out.println("发送失败");
}
} // 拼接所有用户名
public static String jsonName() {
StringBuilder nameStr = new StringBuilder(100);
for (String name : userNames) {
nameStr.append("{\"name\":\"" + name + "\"},");
}
nameStr.delete(nameStr.length() - 1, nameStr.length());
return nameStr.toString();
}
}
JAVA WebSocKet ( 简单的聊天室 )的更多相关文章
- Java WebSocket实现网络聊天室(群聊+私聊)
1.简单说明 在网上看到一份比较nice的基于webSocket网页聊天项目,准备看看学习学习,如是有了这篇文章!原博主博客:http://blog.csdn.net/Amayadream/artic ...
- python使用websocket简单组建聊天室
server端 ###websocket_server### import socket import threading sock = socket.socket(socket.AF_INET, s ...
- Java WebSocket实现简易聊天室
一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是“孔”或“插座”,作为UNI ...
- Java和WebSocket开发网页聊天室
小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...
- 基于websocket实现的一个简单的聊天室
本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...
- nodejs与websocket模拟简单的聊天室
nodejs与websocket模拟简单的聊天室 server.js const http = require('http') const fs = require('fs') var userip ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- 简单的聊天室代码php+swoole
php swoole+websocket 客户端代码 <!DOCTYPE html> <html> <head> <title></title&g ...
- Android简单的聊天室开发（client与server沟通）
请尊重他人的劳动成果.转载请注明出处:Android开发之简单的聊天室(client与server进行通信) 1. 预备知识:Tcp/IP协议与Socket TCP/IP 是Transmission ...
随机推荐
- CTF-练习平台-Misc之 宽带信息泄露
七.宽带信息泄露 下载文件发现是bin文件,题目又说是宽带,所以用工具RouterPassView,打开工具 打开bin文件 快捷键:Ctrl+F搜索username 找到宽带用户名了.
- ACM大牛的BLOG(转)
Twilightgod CUSThttp://blog.csdn.net/twilightgodAekdycoin FZU http://hi.baidu.com/aekdycoinForeverli ...
- python 取整
1.向下取整 向下取整直接用内建的 int() 函数即可: >>> a = 3.75 >>> int(a) 3 2.四舍五入 对数字进行四舍五入用 round() ...
- git的使用方法学习
1.git常用命令: git stash: 备份当前的工作区的内容,从最近的一次提交中读取相关内容,让工作区保证和上次提交的内容一致.同时,将当前的工作区内容保存到Git栈中. git stash p ...
- sql server 阻塞与锁
SQL Server阻塞与锁 在讨论阻塞与加锁之前,需要先理解一些核心概念:并发性.事务.隔离级别.阻塞锁及死锁. 并发性是指多个进程在相同时间访问或者更改共享数据的能力.一般情况而言,一个系统在互不 ...
- hdu 1506 Largest Rectangle in a Histogram——笛卡尔树
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1506 关于笛卡尔树的构建:https://www.cnblogs.com/reverymoon/p/952 ...
- js搞定网页的简繁转换
对网页进行简繁字体转换的方法一般有两种:一是使用<简繁通>这样的专业软件,另外一种是制作两套版本的网页.显然,这两种方法都较为麻烦,而且专业软件一般不能用于免费的空间.笔者在这里给大家提供 ...
- IntelliJ IDEA常用设置
IntelliJ IDEA进入设置界面. “File”->“Settings”,进入如下界面: 界面主题设置 CTR+鼠标滚动键改变编辑区字体大小.设置鼠标在系统类上指定时间显示注释. 设 ...
- php的zend引擎执行过程 一
1. Zend引擎主要包含两个核心部分:编译.执行: 执行阶段主要用到的数据结构: opcode: php代码编译产生的zend虚拟机可识别的指令,php7有173个opcode,定义在 zend_v ...
- js实现loading简单的遮套层
弹出个div 设置div的背景色及透明度当加载完成后remove这个div 或者 隐藏至于淡入淡出通过setTimeout 或者setInterval改变透明度试试 .test{ widt ...