WebScoket 实例简单的网页聊天室

WebScoket 是H5的新特性具体的可以百度，

首先html

<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<style type="text/css">
* {margin: 0px;padding: 0px;
}#container {border: 1px solid;position: relative;margin: auto;margin-top: 50px;width: 500px;height: 500px;
}#text-container {border-top: 1px solid;position: absolute;width: 100%;height: 100px;bottom: 0px;
}#link-container {position: absolute;width: 100%;height: 40px;border-bottom: 1px solid;
}#link-container input {margin-left: 10px;border: none;outline: medium;border: 0.5px solid;width: 120px;margin-top: 5px;height: 30px;
}#link-container #link-server {display: inline-block;border: 0.5px solid;text-align: center;line-height: 28px;width: 50px;height: 28px;
}#text-container textarea {position: absolute;font-size: 24px;margin-left: 2px;width: 80%;height: 90%;border: none;outline: medium;
}#send {position: absolute;left: 80%;width: 20%;height: 100%;text-align: center;line-height: 100px;border-left: 1px solid;font-size: 24px;
}#chat-body {position: absolute;top: 42px;width: 100%;height: 355px;overflow: auto;overflow-y: auto;
}.mymsg {position: absolute;top: 50px;width: 180px;height: auto;word-wrap: break-word;word-break: break-all;overflow: hidden;right: 5px;
}.hermsg {position: absolute;top: 100px;width: 180px;text-align: left;height: auto;word-wrap: break-word;word-break: break-all;overflow: hidden;left: 5px;
}
</style>
<title>聊天室</title>
<body>
<div id="container"><div id="link-container">输入姓名： <input type="text" name="" id="name" value="" /> <spanid="link-server"> 链接 </span></div><div id="chat-body"><span></span></div><div id="text-container"><textarea name="" rows="" cols=""></textarea><div id="send">发送</div></div></div></head></body><script src="js/jquery-1.9.0.min.js" type="text/javascript"charset="utf-8"></script><script type="text/javascript">var socket;$("#link-server").click(function() {var name = $("#name").val()if (name == "") {alert("请输入姓名")} else {var url = "ws://localhost:8080/chartRoom/room/" + name;socket = new WebSocket(url);socket.onopen = function() {alert("链接成功")}socket.onclose = function(event) {alert("服务器断开链接")};//接收数据事件socket.onmessage = function(event) {var span = "<span class='hermsg'>" + event.data + "</span>"var li = $("#chat-body span:last-child").css([ 'top', 'height' ]);var top = li.top;var height = li.height;$("#chat-body").append(span)var top1 = parseInt(top.substring(0, top.length - 2));var heigth1 = parseInt(height.substring(0, height.length - 2));var tops = top1 + heigth1 + 15;$("#chat-body span:last-child").css({"top" : tops + "px"})}}})$("#send").click(function() {var msg = $("#text-container textarea").val();if (msg == "") {alert("请输入内容")} else {socket.send(msg);var span = "<span class='mymsg'>" + "我说：" + msg + "</span>"var li = $("#chat-body span:last-child").css([ 'top', 'height' ]);var top = li.top;var height = li.height;$("#chat-body").append(span)var top1 = parseInt(top.substring(0, top.length - 2));var heigth1 = parseInt(height.substring(0, height.length - 2));var tops = top1 + heigth1 + 15;$("#chat-body span:last-child").css({"top" : tops + "px"})reset()}})//清空输入框function reset() {$("#text-container textarea").val("");}//在浏览器刷新或者关闭的时候断开链接window.onbeforeunload = function() {socket.close();}</script></html>

再是服务端的代码。。

前端需要注意的是 new WebScoket中的 url 其写法为"ws://localhost:8080/chartRoom/room/" + name;

名称以ws开头类似于http 再是你的ip地址和端口号 charRoom为项目的名称 room为当前服务端@ServerEndpoint("/room/{param}")中注解的地址 name就是注解中的参数 param

package com.qhit.web.scoket;import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;import javax.websocket.CloseReason;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
//这里的parm是浏览器传来的参数
@ServerEndpoint("/room/{param}")
public class ChartRoom {private Session session;private String name;//这里采用线程安全的set单例集合来存放聊天室的用户对象private static CopyOnWriteArraySet<ChartRoom> set = new CopyOnWriteArraySet<>();// 连接打开时执行@OnOpenpublic void onOpen(@PathParam(value = "param") String param, Session session) throws IOException {//因为我用的tomcat版本是7.0的所以要进行转码String name = new String(param.getBytes("iso8859-1"), "utf-8");System.out.println(name);this.name = name;this.session = session;set.add(this);System.out.println("欢迎" + this.name + "进入聊天室");//如果这个集合 不为空 则遍历集合 给每个用户 发送消息if (set != null) {for (ChartRoom chartRoom : set) {chartRoom.sendMessage("欢迎" + this.name + "进入聊天室");}} else {sendMessage("欢迎" + this.name + "进入聊天室");}}// 收到消息时执行@OnMessagepublic void onMessage(String message, Session session) {//客户端收到消息的时候 遍历集合 然后实现消息的广播for (ChartRoom socket : set) {try {if (socket != this) {//这里是自定义的广播方法socket.sendMessage(this.name + "说:" + message);}} catch (IOException e) {}}}// 连接关闭时执行@OnClosepublic void onClose(Session session, CloseReason closeReason) {//当用户退出的时候 在set集合中删除当前对象set.remove(this);System.out.println(this.name+"退出了聊天室");}// 连接错误时执行@OnErrorpublic void onError(Throwable t) {t.printStackTrace();}// 自定义的方法，用于发送消息public void sendMessage(String message) throws IOException {   this.session.getBasicRemote().sendText(message);// this.session.getAsyncRemote().sendText(message);}}

这样一个简单的聊天室就写好了

下面看效果图把

WebScoket 实例简单的网页聊天室相关推荐

使用nettyio+socket.io搭建简单的网页聊天室
使用nettyio+socket.io搭建简单的网页聊天室 1 目录结构 2 maven 依赖配置 <project xmlns="http://maven.apache.org/PO ...
基于WebSocket实现网页聊天室
背景在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 ...
Java和WebSocket开发网页聊天室
一.项目简介 WebSocket是HTML5一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用WebSocket来开发网页聊天室,前端框架会使用AmazeUI,后台使用Java,编辑器使用U ...
WebSocket 网页聊天室的实现（服务器端：.net + windows服务，前端：Html5）
websocket是HTML5中的比较有特色一块,它使得以往在客户端软件中常用的socket在web程序中也能轻松的使用,较大的提高了效率.废话不多说,直接进入题. 网页聊天室包括2个部分,后端服务器 ...
网页聊天室的开发笔记
因为参加比赛,需要在网页系统中集成一个网页聊天室的功能,想着自己完整地开发一个.想起最开始学习java基础的时候,最后的作业就是利用java开发一个类似qq的在线聊天软件,但是,当时虽然有老师带着一步 ...
基于flask的网页聊天室（一）
基于flask的网页聊天室(一) 基于flask的网页聊天室(一) 基本目标基于flask实现的web聊天室,具有基本的登录注册,多人发送消息,接受消息扩展目标除基本目标外添加当前在线人数,消息 ...
使用WebSocket实现网页聊天室
使用WebSocket实现网页聊天室一.文章导读服务器推送你还在使用轮询吗?本文将带你领略WebSocket的魅力,轻松实现服务器推送功能.本文将以下面两方面让你理解WebSocket并应用到具体 ...
Nodejs+socket.io 搭建个人的网页聊天室
Nodejs+socket.io 搭建个人的网页聊天室最近看到别人搭建了自己的实时聊天室便产生了兴趣,于是乎自己也着手搭建了一个.在socket这里我选用了socket.io这个模块,在网上看了很多 ...
实现一个简单的语音聊天室（源码）
语音聊天室,或多人语音聊天,是即时通信应用中常见的功能之一,比如,QQ的语音讨论组就是我们用得比较多的. 这篇文章将实现一个简单的语音聊天室,让多个人可以进入同一个房间进行语音沟通.先看运行效果截图: ...
实现一个简单的视频聊天室（源码）
在 <实现一个简单的语音聊天室>一文发布后,很多朋友建议我也实现一个视频聊天室给他们参考一下,其实,视频聊天室与语音聊天室的原理是差不多的,由于加入了摄像头.视频的处理,逻辑会繁杂一些,本 ...

WebScoket 实例简单的网页聊天室

WebScoket 实例简单的网页聊天室相关推荐

最新文章

热门文章

WebScoket 实例 简单的网页聊天室

WebScoket 实例 简单的网页聊天室相关推荐

最新文章

热门文章

WebScoket 实例简单的网页聊天室

WebScoket 实例简单的网页聊天室相关推荐