WebSocket(含表情包)-聊天室

1.源码下载连接点击打开链接

提示：websocket需要tomcat7及其以上或者下载相应的jar包

以下代码仅供参考，大神勿喷

2.代码演示

（1）Java类

package com.tt.webchat;import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;/*** 聊天服务*/
@ServerEndpoint("/myChatServer")
public class ChatServer {// 用于统计用户数量private static AtomicInteger userNumber = new AtomicInteger(1);// 用户姓名private String name = "";// 使用集合来保存用户private static CopyOnWriteArraySet<ChatServer> users = new CopyOnWriteArraySet<ChatServer>();// 定义一个会话private Session session;/*** @param session 当连接成功是调用此方法*/@OnOpenpublic void onOpen(Session session) {name = "博客" + userNumber.getAndIncrement();this.session = session;users.add(this);String info = "<span class='red'>:加入了聊天室</span>";sendMessage(info, session);}/*** @param message 当服务器接收到客服端发送数据时调用此方法*/@OnMessagepublic void onMessage(String message, Session session) {sendMessage("说:" + message, session);}/*** 关闭时执行*/@OnClosepublic void onClose() {users.remove(this);String info = "已离开聊天室";userNumber.decrementAndGet();sendMessage(info, session);}/*** @param mes 向客服端发送消息*/private void sendMessage(String mes, Session session) {for (ChatServer websocket : users) {try {// 防止线程安全synchronized (ChatServer.class) {String info = this.name;if (session == websocket.session) {info = "我";}String text = info + mes;websocket.session.getBasicRemote().sendText(text);}} catch (Exception e) {e.printStackTrace();}}}
}

（2）jsp页面

<%--User:Date: 2018/6/14Time: 9:15To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>websocket</title><link href="css/bootstrap.min.css" rel="stylesheet"><style type="text/css">#box {width: 593px;height: 409px;border: 1px solid;margin: 10px auto;}#content {width: 100%;height: 261px;overflow: auto;}.form-control {border-bottom-style: hidden;outline: none;resize: none; /*取消文本框被拉大*/}.btn-default {width: 105px;position: absolute;right: 385px;}.red {color: red;}</style>
</head>
<body>
<div id="box" class="panel panel-primary"><div id="title" class="panel-heading"><h3 class="panel-title">塔塔-聊天室<span class="glyphicon glyphicon-user" aria-hidden="true"></span></h3></div><div id="content" class="panel-body"></div><div id="send"><textarea class="form-control" id="message" placeholder="内容" rows="3"></textarea><span class="emotion glyphicon glyphicon-plus" style="font-size: 20px" title="表情包(caps lock)"></span><button class="btn btn-default" id="sendMessage">发送</button></div></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qqFace.js"></script>
<script type="text/javascript">var socket = null;// 判断是否支持websocketif ('WebSocket' in window) {socket = new WebSocket("ws://localhost:8080/myChatServer");} else {alert('当前浏览器不支持 websocket');}// 接收服务器发送的数据时触发socket.onmessage = function message(mes) {// 调动打印方法printfMessage(mes.data);// 设置滑动条始终在下方$(".panel-body").scrollTop($(".panel-body")[0].scrollHeight);}// 打印消息function printfMessage(mes) {var info = mes + "<br />"$(".panel-body").append(info);}$(function () {$('.emotion').qqFace({id: 'facebox',assign: 'message',path: 'arclist/'    //表情存放的路径});$("#sendMessage").click(function () {var str = $("#message").val().trim();if (str == "" || str == null) {return;}// 发送内容var text = replace_em(str);// 发送数据socket.send(text);socket$("#message").val("");});});//    键盘监听事件window.onkeydown = function (ev) {var key = ev.keyCode;    //获取对应键盘的ascii码if (key == 13) {$("#sendMessage").click();} else if (key == 20) {$('.emotion').click();}}//查看结果function replace_em(str) {str = str.replace(/\</g, '<');str = str.replace(/\>/g, '>');str = str.replace(/\n/g, '<br/>');str = str.replace(/\[em_([0-9]*)\]/g, '<img src="arclist/$1.gif" border="0" />');return str;}</script>
</body>
</html>

3.演示效果

WebSocket(含表情包)-聊天室相关推荐

教你从零开始用WebSocket打造一个IM聊天室
之前我们在 IM即时聊天室(一):WebSocket 和 IM即时聊天室(二): Socket.io + Node.js 两篇文章中介绍了搭建一个IM的所需的技术栈和通信原理.那在这篇文章里我们就来详 ...
SpringBoot入门建站全系列（二十七）WebSocket做简单的聊天室
SpringBoot入门建站全系列(二十七)WebSocket做简单的聊天室一.概述 WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 ...
SpringBoot WebSocket之多人聊天室实现
SpringBoot WebSocket之多人聊天室实现 WebSocket简介什么是WebSocket? 为什么使用WebSocket? WebSocket的技术特点: WebSocket的技术优 ...
html5 websocket java 聊天室_如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...
rudesocket如何使用_[WebSocket入门]手把手搭建WebSocket多人在线聊天室（SpringBoot+WebS...
前言本文中搭建了一个简易的多人聊天室,使用了WebSocket的基础特性. 源代码来自老外的一篇好文: 本文内容摘要: 初步理解WebSocket的前后端交互逻辑手把手使用 SpringBoot ...
使用Node+websocket实现简易1v1聊天室(前端+服务器)
使用Node+websocket实现简易1v1聊天室(前端+服务器) 前提: 安装好node环境~~~ 可使用 node -v 和 npm -v 查看是否装好实现逻辑: 用户A 用户B 服务器用户 ...
Nodejs+webSocket搭建多人聊天室
NodeJs+webSocket搭建多人聊天室准备的东西: 第一步:安装插件并且完善服务端第二步 :搭建客户端并与服务端的通信第三步 :添加CSS样式第四步:总结今天花了一个上午的时间去学习 ...
WebSocket 入门：简易聊天室
大家好,我是前端西瓜哥,今天我们用 WebSocket 来实现一个简单的聊天室. WebSocket 是一个应用层协议,有点类似 HTTP.但和 HTTP 不一样的是,它支持真正的全双工,即不仅客户端 ...
html 聊天室模版,WebSocket+HTML5实现在线聊天室
centos6.8 我之前在系统上安装了php7还有swoole扩展可以用命令查看扩展有没有装好php -i|grep swoole (没装的直接看我之前文章吧,或者留言我告诉你怎么装)git cl ...

WebSocket(含表情包)-聊天室

2.代码演示

3.演示效果

WebSocket(含表情包)-聊天室相关推荐

最新文章

热门文章