基于WebSocket实现网页版聊天室
WebSocket ，HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，其使用简单，应用场景也广泛，不同开发语言都用种类繁多的实现，仅Java体系中，Tomcat,Jetty，Spring等都提供了对WS的API支持。本篇不做理论探究，仅自娱自乐，简单实现网页版的聊天室功能，在实际开发场景中变通使用即可。废话不叽歪，直接撸出来——
1 简单页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HanppyRoom</title>
<script>
var url = "ws://" + window.location.host + "/page_room/";
var ws = null;
//加入聊天室
function joinRoom() {
if (ws) {
alert("你已经在聊天室，不能再加入");
return;
}
var username = document.getElementById("user").value;
ws = new WebSocket(url + username);
//与服务端建立连接触发
ws.onopen = function () {
console.log("与服务器成功建立连接")
};
//服务端推送消息触发
ws.onmessage = function (ev) {
talking(ev.data);
}; //发生错误触发
ws.onerror = function () {
console.log("连接错误")
};
//正常关闭触发
ws.onclose = function () {
console.log("连接关闭");
};
} //退出聊天室
function exitRoom() {
closeWebSocket();
} function sendMsg() {
if(!ws){
alert("你已掉线，请重新加入");
return;
}
//消息发送
ws.send(document.getElementById("sendMsg").value);
document.getElementById("sendMsg").value = ""; } function closeWebSocket() {
if(ws){
ws.close();
ws = null;
}
} function talking(content) {
document.getElementById("content").append(content + "\r\n");
}
</script>
</head>
<body>
<div style="text-align: center;background-color: rgba(129,86,255,0.35);margin:0 auto;border:1px solid #000;width:600px;height:650px">
<br>欢迎使用<strong>陈本布衣</strong>牌极简聊天室：<br/><br/>
<textarea id="content" cols="60" rows="30" readonly="readonly"></textarea><br>
<input type="text" id="sendMsg">
<button type="button" onclick="sendMsg()">发送消息</button>
<br/><br/>
用户：<input type="text" id="user">
<button onclick="joinRoom()">加入群聊</button>
<button onclick="exitRoom()">退出群聊</button>
</div>
</body>
</html>
2 后端实现
/**
* @ServerEndpoin 注解声明该类为 WebSocket 的服务端端点
* value 值为监听客户端访问的 URL
*/
@ServerEndpoint(value = "/page_room/{username}")
public class WsByTomcat { //这里只是简单测试用，真正的场景请考虑线程安全的容器或其它并发解决方案
private static List<Session> sessions = new ArrayList<>(); /**
* @param session 与客户端的会话对象【可选】
* @param username 路径参数值 【可选】
* @throws IOException
* @OnOpen 标注此方法在 ws 连接建立时调用，可用来处理一些准备性工作 可选参数
* EndpointConfig（端点配置信息对象） Session 连接会话对象
*/
@OnOpen
public void OnOpen(Session session, @PathParam("username") String username) throws IOException {
sessions.add(session);
sendTextMsg("好友 [" + username + "] 加入群聊");
} /**
* @param msg 接受客户端消息
* @param username RESTful 路径方式获取用户名
* @throws IOException
* @OnMessage 在收到客户端消息调用 消息形式不限于文本消息，还可以是二进制消息(byte[]/ByteBuffer等)，ping/pong 消息
*/
@OnMessage
public void OnMsg(String msg, @PathParam("username") String username) throws IOException {
sendTextMsg(username + "：\r\n" + msg);
} /**
* @OnClose 连接关闭调用
*/
@OnClose
public void OnClose(Session session, @PathParam("username") String username) throws IOException {
sessions.remove(session);
sendTextMsg("好友 ["+username + "] 退出群聊");
} /**
* @param e 异常参数
* @OnError 连接出现错误调用
*/
@OnError
public void OnError(Throwable e) {
e.printStackTrace();
} private void sendTextMsg(String msg) {
for (Session session : sessions) {
session.getAsyncRemote().sendText(msg);
}
}
}
3 3P聊天效果
基于WebSocket实现网页版聊天室的更多相关文章
- 如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...
- Springboot整合WebSocket实现网页版聊天，快来围观！
- 基于websocket实现的web聊天室
# -*- coding:utf-8 -*- import socket import base64 import hashlib def get_headers(data): "" ...
- php基于websocket实现的在线聊天室
听说websocket技术可以实现 1.
- 分享基于 websocket 网页端聊天室
博客地址:https://ainyi.com/67 有一个月没有写博客了,也是因为年前需求多.回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!! 主题 基于 websock ...
- SpringBoot基于websocket的网页聊天
一.入门简介正常聊天程序需要使用消息组件ActiveMQ或者Kafka等,这里是一个Websocket入门程序. 有人有疑问这个技术有什么作用,为什么要有它?其实我们虽然有http协议,但是它有一个缺 ...
- 基于 OpenResty 实现一个 WS 聊天室
基于 OpenResty 实现一个 WS 聊天室 WebSocket WebSocket 协议分析 WebSocket 协议解决了浏览器和服务器之间的全双工通信问题.在WebSocket出现之前,浏览 ...
- swoole实验版聊天室
“swoole实验版聊天室”是依据一堂swoole培训课内容改编的,结合了bootstrap前端框架.redis数据库.jquery框架等实现基本功能,只是体现了swoole的应用,并不是为了专门写个 ...
- Django中使用websocket并实现简易聊天室
django使用websocket并实现简易聊天室 django默认只支持http协议 如果你想让django即支持http协议又支持websocket协议,则需要做以下配置 前期配置 前提需要安装c ...
随机推荐
- 查看正在执行的sql语句
;WITH t AS( SELECT [Spid] = session_Id, ecid, [Database] = DB_NAME(sp.dbid), [User] = nt_username, [ ...
- MVC4 WebApi开发中如果想支持Session请做好如下几个方面的问题
1.在WebApiConfig中建立建立HttpControllerHandler和HttpControllerRouteHandler 并覆写它 public class SessionRouteH ...
- ADexplorer - 用来查看AD的工具
ADExplorer是一款可以帮助查看和编辑数据库的软件.该数据库查看编辑器使用方便,操作简单,用户可通过该软件进行浏览AD数据库.自定义快速入口.查看对象属性.编辑权限.精确搜索等操作,还可以保存数 ...
- windows下安装redis及其客户端
首先下载redis安装包:https://github.com/MSOpenTech/redis/releases 解压安装包到相应文件夹,任何盘符都行. 文件介绍:redis-server.exe: ...
- MySQL比较两个表不同的数据
在本教程中,您将学习如何比较两个表以找到不匹配的记录. 在数据迁移中,我们经常需要比较两个表,以便在一个表中标识另一个表中没有相应记录的记录. 例如,我们有一个新的数据库,其架构与旧数据库不同.我们的 ...
- 【转帖】阿里金融云：分布式服务注册中心(DSR)
https://www.cloud.alipay.com/docs/middleware/register/index.html 分布式服务注册中心(DSR) 分布式服务注册中心简介 服务注册中心 ( ...
- Python线程指南(转)
1. 线程基础 1.1. 线程状态 线程有5种状态,状态转换的过程如下图所示: 1.2. 线程同步(锁) 多线程的优势在于可以同时运行多个任务(至少感觉起来是这样).但是当线程需要共享数据时,可能存在 ...
- CentOS下安装和配置MySQL-JDK-Tomcat-Nginx(个人官网环境搭建手冊)
今天,又一次弄我的个人云主机的环境.准备运营自己用Java写的个人官网等站点. 服务器环境:阿里云CentOS 6.4位 包含以下脚本在内的绝大部分命令和脚本,都是我亲自运行过,靠谱的. 完整的&qu ...
- Python3 isprintable() 方法
描述 判断字符串中所有字符是否都是可打印字符(in repr())或字符串为空. Unicode字符集中“Other” “Separator”类别的字符为不可打印的字符(但不包括ASCII码中的空格( ...
- Altium PCB布局时快速摆放元件的技巧
http://www.openedv.com/posts/list/45238.htm pcb窗口:工具--->交叉选择模式