使用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 ...
随机推荐
- vue移动端弹框组件
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
- mysql中的反引号``
[1]反引号`,数字1左边的符号.tab键上面的符号. 它是为了区分MYSQL的保留字与普通字符而引入的符号. 不加反引号建的表不能包含MYSQL保留字,否则出错 如上图,很明显的,如果我们直接建立名 ...
- Oracle定时调用存储过程
#1Demo: 1.创建表 create table job_table(run_time date); 2.创建存储过程 create or replace procedure job_proc i ...
- java获取单张网页中img标签中的src
/** * 得到网页中图片的地址 */ public static List<String> getImgStr(String htmlStr) { List<String> ...
- HDU - 2196（树形DP）
题目: A school bought the first computer some time ago(so this computer's id is 1). During the recent ...
- go环境变量配置 (GOROOT和GOPATH)的区别和含义
GOROOT就是go的安装路径 在~/.bash_profile中添加下面语句: GOROOT=/usr/local/go export GOROOT 当然, 要执行go命令和go工具, 就要配置go ...
- POJ2773Happy2006题解--数论好题
题目链接 https://cn.vjudge.net/problem/POJ-2773 题意: 求第\(k\)个与\(m\)互质的数 分析 因为\(gcd(a,b)=gcd(a+t * b,b)\) ...
- 【Caffe学习笔记】一 、环境安装 Caffe + cuda + windows10 + VS2015 安装笔记， win7也适用
1. 下载cuda8.0 cudnn5 anaconda https://developer.nvidia.com/cuda-80-ga2-download-archive https://de ...
- spark2.0 DataSet操作的一些问题记录
随着新版本的Spark已经逐渐稳定,最近拟将原有框架升级到spark 2.0.还是比较兴奋的,特别是SQL的速度真的快了许多.. 然而,在其中一个操作时却卡住了.主要是dataframe.map操作, ...
- 关于微信小程序返回页面时刷新页面的实现
在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...