使用WebSocket实现简单的在线聊天室
前言：我自已在网上找好了好多 WebSocket 制作 在线聊天室的案列，发现大佬们写得太高深了 我这种新手看不懂，所以就自已尝试写了一个在线简易聊天室 (我只用了js 可以用jq )
话不多说，直接上案列：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> WebSocket </title>
<style>
.main{
border: 1px solid red;
width: 600px;
height: 600px;
margin: auto;
}
#center{
width: 400px;
height: 400px;
float: left;
overflow: auto;
border: 1px solid blue;
}
#right{
width: 196px;
height: 400px;
float: right;
overflow: auto;
border: 1px solid blue;
}
#userCss{
border: 1px solid chartreuse;
width: 192px;
height: 130px;
float: right;
text-align: center;
}
</style>
</head>
<body>
<!--<div>-->
<!--<input type="button" id="btnConnection" value="连接" />-->
<!--<input type="button" id="btnClose" value="关闭" />-->
<!--<input type="button" id="btnSend" value="发送" />-->
<!--</div>--> <div class="main">
<h4 style="text-align: center">简 易 聊 天 室</h4>
<div id="center"></div>
<div id="right">
<p style="text-align: center"> 用户状态<p>
</div>
<textarea id="txtC" style="width: 400px;height: 130px;"></textarea>
<div id="userCss">
用户名:<input id="user" type="text" style="width:79px"/>
<br/>
<br/>
<button id="btn" style="width:100px;height:50px"> 发 送 </button>
<br/>
<p></p>
<button id="close"> 关 闭 连 接</button>
</div>
</div> <script type="text/javascript"> var socke; //监听用户框输入的用户名 (失去焦点事件)
document.getElementById("user").onblur=function () {
var user = document.getElementById("user").value;
//当用户输入完用户名并且失去焦点时 自动实现 连接 //ws+ 服务器地址+端口号 +后台url + 用户名
socke = new WebSocket("ws://localhost:8080/ws/"+user); //用户输入完用户名离开输入框 输入框变成禁用
document.getElementById("user").disabled=true;
//连接
socke.onopen=function (msg) {
//document.getElementById("right").innerHTML+="<p>您的用户名:"+user+" 已连接聊天室</p>";
console.log("已连接成功！");
}
socke.onclose=function () {
//document.getElementById("right").innerHTML+="<p>您的用户名:"+user+" 已退出聊天室</p>";
}
//接收后台信息
socke.onmessage=function (msg) { //取出 标志用户 字段
var userName =msg.data.substring(0,msg.data.indexOf("&"));
if(userName=="userKet"){
//取出用户
var userAll = msg.data.substring(msg.data.indexOf("&")+1).split(",");
for(var i=0;i<userAll.length;i++)
document.getElementById("right").innerHTML+="<p>"+userAll[i]+",已连接聊天室</p>";
}
if(userName=="conter"){
var text = msg.data.substring(msg.data.indexOf("&")+1,msg.data.length);
document.getElementById("center").innerHTML+="<p>"+text+"</p>";
} } socke.onerror=function () {
alert("发生了未知错误，请联系管理员....");
};
}; //发送内容事件
document.getElementById("btn").onclick=function(){
var user = document.getElementById("user").value;
if(user==""||user==null){
alert("用户名不能为空");
return false;
}
if(document.getElementById("txtC").value==""){
alert("请输入内容!!!!");
return false;
}
//向后台发送用户输入的内容
var text = document.getElementById("txtC").value;
socke.send(text);
document.getElementById("txtC").value="";
}; //关闭连接
document.getElementById("close").onclick=function () {
socke.close();
document.getElementById("user").disabled=false;
}; </script>
</body>
</html>
后台：
package SocketTest; import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.*; @ServerEndpoint("/ws/{user}")
public class SocketDemo {
//currentuser 记录现在的用户
private String currentUser; //用集合保存相对应用户 session Id
private static Map<String ,String> userName = new HashMap<String,String>(); private static Set<Session> login = new HashSet<>(); //连接执行的方法
@OnOpen
public void onOpen(@PathParam("user") String user, Session session){
currentUser = user; //存放所有的连接的用户
userName.put(session.getId(),user);
//
login.add(session); System.out.println("用户:"+user+" 对应的Id:"+ session.getId());
try {
//向前台响应信息
String nameAll ="";
String link="";
for (String s:userName.keySet()) {
nameAll +=link+userName.get(s);
link=",";
}
for (Session s:login) {
s.getBasicRemote().sendText("userKet&"+nameAll);
} } catch (IOException e) {
e.printStackTrace();
}
// return "用户:"+user+" 对应的Id:"+ session.getId();
}
//收到信息执行的方法
@OnMessage
public void onMessage(String message,Session session ){
//通过键读取值
for (Session s:login) {
if(s.isOpen()){
try {
//将所有用户的输入内容发送到前端
s.getBasicRemote().sendText("conter&"+currentUser+"说:"+message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
// return "用户:"+currentUser+"说:"+message;
}
//连接关闭时执行
@OnClose
public void onClose(Session session, CloseReason closeReason){
System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason));
}
//错误时执行
@OnError
public void onError(Throwable t){
t.printStackTrace();
} }
演示：
有些bug，尚未修复.....
使用WebSocket实现简单的在线聊天室的更多相关文章
- 基于Server-Sent Event的简单聊天室 Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...
- [NodeJS]使用Node.js写一个简单的在线聊天室
声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...
- 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室
一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...
- WebSocket实现简单的在线聊天
SuperWebSocket在WebService中的应用 最开始使用是寄托在IIS中,发布之后测试时半个小时就会断开,所以改为WindowsService 1. 新建Windows服务项目[Test ...
- springboot+websocket实现简单的在线聊天功能
效果如下: java实现逻辑: 1.引入maven依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...
- pyzmq简单的在线聊天室
#encoding=utf-8#客户端 import zmq c = zmq.Context() s = c.socket(zmq.REQ) s.connect('tcp://127.0.0.1:10 ...
- 基于Server-Sent Event的简单在线聊天室
Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...
- 在线聊天室的实现(1)--websocket协议和javascript版的api
前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...
- 百度前端面试题－类似slack的在线聊天室
别人国庆出去玩,我在家写代码的感觉也是很不错哒. 首先介绍一下技术架构吧! 使用了js框架:FFF,zepto,jquery,md5.min.js 前端框架:Bootstrap 后端:野狗,部分PHP ...
随机推荐
- IO阻塞模型、IO非阻塞模型、多路复用IO模型
IO操作主要包括两类: 本地IO 网络IO 本地IO:本地IO是指本地的文件读取等操作,本地IO的优化主要是在操作系统中进行,我们对于本地IO的优化作用十分有限 网络IO:网络IO指的是在进行网络操作 ...
- mysql 全表扫描场景
全表扫描是数据库搜寻表的每一条记录的过程,直到所有符合给定条件的记录返回为止.通常在数据库中,对无索引的表进行查询一般称为全表扫描:然而有时候我们即便添加了索引,但当我们的SQL语句写的不合理的时候也 ...
- 华为CPU的类型
主要分类: 以及 一句名言
- 解决redis运行期间key值过期但是内存memory依然占用过高
要解决这个问题,首先要了解redis info信息中几个数据的意义: used_memory:810575104 //数据占用了多少内存(字节) used_memory_human:773.02 ...
- Java:泛型的理解
本文源自参考<Think in Java>,多篇博文以及阅读源码的总结 前言 Java中的泛型每各人都在使用,但是它底层的实现方法是什么呢,为何要这样实现,这样实现的优缺点有哪些,怎么解决 ...
- （六）mybatis 全局配置文件讲解
目录 properties (属性) settings 全局参数配置 typeAliases 别名设置 typeHandlers 类型处理器 mapper (映射器) 细节 properties (属 ...
- macos catalina安装python3
之前跟着教程用brow安装了python3,后来发现电脑上有三个版本的python,头大. 于是用brew uninstall --force python3卸掉了python3 看到现在有两个版本 ...
- selenium登录实验楼
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.s ...
- 1.CentOS 7 vs CentOS 6的不同
CentOS 7 vs CentOS 6的不同(1)桌面系统[CentOS6] GNOME 2.x[CentOS7] GNOME 3.x(GNOME Shell) (2)文件系统[CentOS6] ...
- ts转js 并压缩
1,在线编译,进入typescript官网http://www.typescriptlang.org/,点击里面的playground就可以直接写代码了. 2,在本地编译运行Typescript需要使 ...