使用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 ...
随机推荐
- The timeout period elapsed prior to completion of the operation or the server is not responding.
问题:更新数据的状态值时,部分报出如下异常: 即时有成功更新,时有报错问题出现. 在LOG中发现成功更新的数据,存在更新时间过长问题,将近30秒(EF默认的CommandTimeout为30秒): 代 ...
- poj3107（树的重心，树形dp）
题目链接:https://vjudge.net/problem/POJ-3107 题意:求树的可能的重心,升序输出. 思路:因为学树形dp之前学过点分治了,而点分治的前提是求树的重心,所以这题就简单水 ...
- idea调试框架时如何能够进入maven依赖包的源码
最近用idea使用spring security做登录与权限控制,在调试过程中碰到问题,经常需要断点追踪源码,深入查看其中问题.但是maven中引用的包,进入后都是.class文件,非源码.导致查看时 ...
- 关于SQLSERVER登录不了的情况
是这样的,本人为了复制一个数据库文件把默认数据库设置成了脱机状态.在此点击联机的时候SSMS显示重启,重启后在用windows登录显示无法打开默认数据库.用其他不适该默认数据库的账号可以登录.想问一下 ...
- Linux系统忘记root密码，紧急模式下更改密码
linux忘记密码命令概括: 1.开机按e,rd.break,ctrl+x: 2.mount -o remount,rw /sysroot 3.chroot /sysroot 4.passwd( ...
- NOIP比赛中如何加速c++的输入输出
NOIP比赛中如何加速c++的输入输出 在竞赛中,遇到大数据时,往往需要更快的读取方式.由于比赛中输出一般规模较小,本文只讨论输入如何加速. 现在我们生成1000000个随机数,构成1000*1000 ...
- 【广搜】Knight Moves
题目描述 Mr Somurolov, fabulous chess-gamer indeed, asserts that no one else but him can move knights fr ...
- IntelliJ IDEA 搭建 Go 开发环境
本文介绍 Windows7 x64 基于 IntelliJ IDEA 搭建 Go 语言开发环境.主要是一些操作过程截图以及简单文字描述,如有不清楚的地方,欢迎指正.所有软件使用当前(2016.12. ...
- Scala学习二十一——隐式转换和隐式参数
一.本章要点 隐式转换用于类型之间的转换 必须引入隐式转换,并确保它们可以以单个标识符的形式出现在当前作用域 隐式参数列表会要求指定类型的对象.它们可以从当前作用域中以单个标识符定义的隐式对象的获取, ...
- 无法删除登录名 '***'，因为该用户当前正处于登录状态。 (Microsoft SQL Server，错误: 15434)
问题描述: 当删除数据库用户时,有时会得到这样的提示: 无法删除登录名 '***',因为该用户当前正处于登录状态. (Microsoft SQL Server,错误: 15434) 解决办法: 1.首 ...