WebSocket实现简易聊天室
前台页面：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Web sockets test</title>
<style type="text/css">
.container {
font-family: "Courier New";
width: 680px;
height: 300px;
overflow: auto;
border: 1px solid black;
} .LockOff {
display: none;
visibility: hidden;
} .LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 1024%;
height: 768%;
background-color: #ccc;
text-align: center;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
}
</style> <script src="jquery-min.js" type="text/javascript"></script>
<script type="text/javascript">
var ws;
var SocketCreated = false;
var isUserloggedout = false; function lockOn(str) {
var lock = document.getElementById('skm_LockPane');
if (lock)
lock.className = 'LockOn';
lock.innerHTML = str;
} function lockOff() {
var lock = document.getElementById('skm_LockPane');
lock.className = 'LockOff';
} function ToggleConnectionClicked() {
if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {
lockOn("离开聊天室...");
ws.send("【" + document.getElementById("txtName").value + "】离开了聊天室！");
SocketCreated = false;
isUserloggedout = true;
ws.close();
} else {
lockOn("进入聊天室...");
Log("准备连接到聊天服务器 ...");
try {
if ("WebSocket" in window) {
ws = new WebSocket("ws://" + document.getElementById("Connection").value);
}
else if ("MozWebSocket" in window) {
ws = new MozWebSocket("ws://" + document.getElementById("Connection").value);
} SocketCreated = true;
isUserloggedout = false;
} catch (ex) {
Log(ex, "ERROR");
return;
}
document.getElementById("ToggleConnection").innerHTML = "断开";
ws.onopen = WSonOpen;
ws.onmessage = WSonMessage;
ws.onclose = WSonClose;
ws.onerror = WSonError;
}
}; function WSonOpen() {
lockOff();
Log("连接已经建立。", "OK");
$("#SendDataContainer").show();
ws.send("【"+document.getElementById("txtName").value+"】进入了聊天室!");
}; function WSonMessage(event) {
// console.log(event)
// Log(event.data);
var data = event.data;
var obj = JSON.parse(data);
if ("1" == obj.code) { // 客户端信息回显
Log(obj.data);
} else if ("0" == obj.code) { // 在线人数更新
$("#logCount").text(obj.data);
}
}; function WSonClose() {
lockOff();
if (isUserloggedout)
Log("【" + document.getElementById("txtName").value + "】离开了聊天室！");
document.getElementById("ToggleConnection").innerHTML = "连接";
$("#SendDataContainer").hide();
}; function WSonError() {
lockOff();
Log("远程连接中断。", "ERROR");
}; function SendDataClicked() {
if (document.getElementById("DataToSend").value.trim() != "") {
ws.send(document.getElementById("txtName").value + "说 :\"" + document.getElementById("DataToSend").value + "\"");
document.getElementById("DataToSend").value = "";
}
}; function Log(Text, MessageType) {
if (MessageType == "OK") Text = "<span style='color: green;'>" + Text + "</span>";
if (MessageType == "ERROR") Text = "<span style='color: red;'>" + Text + "</span>";
document.getElementById("LogContainer").innerHTML = document.getElementById("LogContainer").innerHTML + Text + "<br />";
var LogContainer = document.getElementById("LogContainer");
LogContainer.scrollTop = LogContainer.scrollHeight;
}; $(document).ready(function () {
$("#SendDataContainer").hide();
var WebSocketsExist = true;
try {
var dummy = new WebSocket("ws://localhost:8080/test");
} catch (ex) {
try {
webSocket = new MozWebSocket("ws://localhost:8080/test");
}
catch (ex) {
WebSocketsExist = false;
}
} if (WebSocketsExist) {
Log("您的浏览器支持WebSocket. 您可以尝试连接到聊天服务器!", "OK");
document.getElementById("Connection").value = "localhost:8080/wschat";
} else {
Log("您的浏览器不支持WebSocket。请选择其他的浏览器再尝试连接服务器。", "ERROR");
document.getElementById("ToggleConnection").disabled = true;
} $("#DataToSend").keypress(function (evt) {
if (evt.keyCode == 13) {
$("#SendData").click();
evt.preventDefault();
}
}) //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
ws.close();
}
}); </script>
</head>
<body>
<div id="skm_LockPane" class="LockOff"></div>
<form id="form1" runat="server">
<h1>Web Socket 聊天室</h1>
<br/>
<div>
按下连接按钮，会通过WebSocket发起一个到聊天浏览器的连接。
</div>
服务器地址: <input type="text" id="Connection"/> 用户名： <input type="text" id="txtName" value="黄晓安"/>
<button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>连接</button>
在线人数：<span id="logCount">0</span>
<br/>
<br/>
<div id='LogContainer' class='container'></div>
<br/>
<div id='SendDataContainer'>
<input type="text" id="DataToSend" size="88"/>
<button id='SendData' type="button" onclick='SendDataClicked();'>发送</button>
</div>
<br/>
</form>
</body>
</html>
后台代码：
package com.uptop.websocket; import com.alibaba.fastjson.JSON;
import com.uptop.entity.ResultVo; import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet; /**
* websocket 聊天室
*
* @author Administrator
* @create 2018-02-05 15:17
*/
@ServerEndpoint("/wschat")
public class WebSocketChat {
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0; //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
public static CopyOnWriteArraySet<WebSocketChat> webSocketSet = new CopyOnWriteArraySet<WebSocketChat>(); //与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session; /**
* 连接建立成功调用的方法
*
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
// 发送在线人数数据
ResultVo resultVo = new ResultVo("0",this.onlineCount,"from server");
sendMsg(JSON.toJSONString(resultVo));
System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
} /**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
// 发送在线人数数据
ResultVo resultVo = new ResultVo("0",this.onlineCount,"from server");
sendMsg(JSON.toJSONString(resultVo));
System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
} /**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
// 封装客户端消息
ResultVo resultVo = new ResultVo("1",message,"from client");
String jsonStr = JSON.toJSONString(resultVo);
//群发消息
for (WebSocketChat item : webSocketSet) {
try {
item.sendMessage(jsonStr);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
} /**
* 发生错误时调用
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
} /**
* 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
*
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message); } public static synchronized int getOnlineCount() {
return onlineCount;
} public static synchronized void addOnlineCount() {
WebSocketChat.onlineCount++;
} public static synchronized void subOnlineCount() {
WebSocketChat.onlineCount--;
} public static void sendMsg(String msg) {
for (WebSocketChat item : webSocketSet) {
try {
item.sendMessage(msg);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
}
效果图：
注：本案例参考ibm文库案例的前台页面，后台使用Java实现。
WebSocket实现简易聊天室的更多相关文章
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- node.js+websocket实现简易聊天室
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...
- node+websocket创建简易聊天室
关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...
- 使用Html5下WebSocket搭建简易聊天室
一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...
- 小案例-WebSocket实现简易聊天室
前言 在详解 HTTP系列之一讲到HTTP/2.0 突破了传统的"请求-问答模式"这一局限,实现了服务器主动向客户端传送数据.而本章将通过一种在单个TCP连接上进行全双工通信的协议 ...
- 基于WebSocket的简易聊天室
用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...
- Servlet WebSocket的简易聊天室
添加依赖 <!-- websocket --> <dependency> <groupId>javax.websocket</groupId> < ...
- 使用go，基于martini，和websocket开发简易聊天室
一.首先,需要了解一下websocket基本原理:here 二.go语言的websocket实现: 基于go语言的websocket也有不少,比如github.com/gorilla/websocke ...
随机推荐
- Oracle性能优化小结
Oracle性能优化小结 原则一.注意where子句中的连接顺序 Oracle采用自下而上的顺序解析where子句,根据这个原理,表之间的连接必须卸载其他where条件之前,哪些可以滤掉最大数量记录的 ...
- BUU easyre
拖入ida中shift+F12查找字符串就可以看到flag
- Matplotlib 教程
Matplotlib是python中最流行的数据绘图库,使用matplotlib,您可以绘制任何类型的图形. 本教程的目标是让您轻松学会使用matplotlib绘制复杂的图形. 预备知识 熟悉Pyth ...
- gpg加密和解密
linux:gpg加密和解密 1 创建密钥 2 查看私钥 3 导出公钥 4 导出私钥 5 导入秘钥 5.1 公钥 6 公钥加密 7 私钥解密 创建密钥 gpg --gen-key 你要求输入一下内容, ...
- pta 拯救007(Floyd)
7-9 拯救007(25 分) 在老电影“007之生死关头”(Live and Let Die)中有一个情节,007被毒贩抓到一个鳄鱼池中心的小岛上,他用了一种极为大胆的方法逃脱 —— 直接踩着池子里 ...
- Timetable CodeForces - 946D （预处理+背包）
题意:n天m节课,最多可以逃k节课,每天在学校待的时间为该天上的第一节课到最后一节课持续的时间.问怎样逃课可以使这n天在学校待的时间最短,输出最短的时间. 分析: 1.预处理出每天逃j节课时在学校待的 ...
- NO9 Linux快捷键整理及最常用命令
Linux快捷键整理及最常用命令 常用快捷键: Ctrl + u 删除光标之前到行首的字符 Ctrl + k 删除光标之前到行尾的字符 Ctrl + c ...
- 从PC厂商狠抓粉丝经济看，春天将至？
10月中旬,市场研究机构IDC发布的全球三季度PC出货量报告显示,第三季度全球个人电脑出货量总计6740万台,比去年同期下降0.9%.似乎这一数据的发布,依旧在证明着PC市场的颓势.但在这样的大背景下 ...
- mcu运行时间估算
昨个伙计问我他那个板子的程序运行时间估算问题… 现在说一下估算的思路.首先确定有几个点,板子的主频.时钟周期,机器周期. 首先由主频f得到一个时钟周期为1/f. 再者时钟周期与机器周期有一个比例关系, ...
- @echo off命令
在C盘下新建一个文本文档,将名字改为1.bat. 打开/编辑,输入call cmd.cmd是命令提示符.运行该文件,出现命令提示符窗口,在该窗口下可以运行各种命令.由图1.1可见,在第一行显示C:\ ...