使用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 ...
随机推荐
- CentOS7编译安装libc++和libc++abi
本文介绍了如何在CentOS 7中构建C++11构建环境 Clang的定制C++库是libc++(libcxx).然后,libcxx还需要一个ABI库,libc++abi(libcxxabi).不幸的 ...
- Linux中 cmake-3.x 编译安装以及man page添加
首先回顾一下 cmake-2.x 的编译安装. ================ cmake-2.x编译安装说明 ================编译安装的命令: ./bootstrap --pref ...
- 什么是SSL证书服务？
SSL证书服务(Alibaba Cloud SSL Certificates Service)由阿里云联合多家国内外数字证书管理和颁发的权威机构.在阿里云平台上直接提供的服务器数字证书.您可以在阿里云 ...
- 【AtCoder】ARC062
ARC062 C - AtCoDeerくんと選挙速報 / AtCoDeer and Election Report 每次看看比率至少变成多少倍能大于当前的数 然后就把两个人的票都改成那个数 #incl ...
- vue去掉链接中的#
在router.js中修改, const router = new VueRouter({ mode: 'history', routes: [...] })
- linux fork进程请谨慎多个进程/线程共享一个 socket连接，会出现多个进程响应串联的情况。
昨天组内同学在使用php父子进程模式的时候遇到了一个比较诡异的问题 简单说来就是:因为fork,父子进程共享了一个redis连接.然后父子进程在发送了各自的redis请求分别获取到了对方的响应体. 复 ...
- Codeforces 1247F. Tree Factory
传送门 正难则反,把链操作成树不好想,那么考虑一下如何把树变成链 每次操作相当于把一个兄弟变成儿子(我把你当兄弟你竟然想把我当儿子.jpg) 注意到每次操作最多只能使树的深度增加 $1$ 因为链的深度 ...
- NIPS2018最佳论文解读：Neural Ordinary Differential Equations
NIPS2018最佳论文解读:Neural Ordinary Differential Equations 雷锋网2019-01-10 23:32 雷锋网 AI 科技评论按,不久前,NeurI ...
- Nginx安装启动过程报错libpcre.so.1 cannot open shared object file: No such file or directory
具体报错信息如下: nginx: error while loading shared libraries: libpcre.so.1: cannot open shared object file: ...
- SqlServer2008 跨服务器同步数据
最近工作中需要跨服务器同步数据,在数据库DB1中的表T1插入数据,同时触发T1的触发器(这里暂不讨论触发器的效率问题),向另一台服务器DB2中的相同的一张表T2插入数据,查看了一些资料说, 需要打开D ...