使用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 ...
随机推荐
- 局部内部类的final问题
局部内部类,如果希望访问所在方法的局部变量,那么这个局部变量就必须是final的(或者只赋值一次) 从Java8开始,只要局部变量事实不变那么final关键字可以省略 为什么需要保证变量为final, ...
- 【1.0】shell常用信息
[1]获取IP地址 /sbin/ifconfig|grep -A1 -E "^eth0|em2"|grep "inet addr"|awk -F':' '{pr ...
- java中package包
一个.java文件内部有一个.而且只能有一个public类,类名必须与文件名完全一致. 在一个.java文件的开头使用package关键字,作用是指出这个编译单元属于该package的一个库的一部分. ...
- 如何查看class文件的编译jdk版本号
使用命令 javap -verbose 命 进入cmd中,使用如下命令 红色
- log4j一些配置用法
Log4j基本用法----日志级别 基本使用方法: Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式.日志信息的优先级从高到低有ERROR.WARN.INFO ...
- 2.1spring cloud 环境配置
前提:SpringBoot可以离开SpringCloud独立使用开发项目,但是SpringCloud离不开SpringBoot,属于依赖的关系. 所以基本是搭建SpringBoot + 组件 = Sp ...
- REST架构中的HTTP动词
POST 增 DELETE 删 PUT 改 GET 查 GET(SELECT):从服务器取出资源(一项或多项). POST(CREATE):在服务器新建一个资源. PUT(UPDATE):在服务器更新 ...
- 第一章、web应用安全概论--web应用系统介绍--TCP/IP协议
TCP/IP协议源于1969年,是国际互联网Internet采用的协议标准TCP/IP协议是一组通信协议的代名词,是由一系列协议组成的协议族,本身是指两个协议集: TCP--传输控制协议 ...
- 手机设置Fiddler代理后无法访问Https网络的解决办法
第一种方法: 首先,下载最新版本的Fiddler,将手机和PC设置为统一局域网(手机链接PC的wifi) 打开手机设置-无线网络设置,设置代理为手动,输入pc的ip和Fillder的端口8888(Fi ...
- 面试官：Kafka 如何优化内存缓冲机制造成的频繁 GC 问题？
Jusfr 原创,转载请注明来自博客园 Request 与 Response 的响应格式 Request 与 Response 都是以 长度+内容 形式描述, 见于 A Guide To The Ka ...