WebSocket 搭建简单聊天网站
HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象
出现背景：
1、hhtp协议是最简单的请求-响应方式，服务器特别被动
2、服务器需要主动将信息发送给客户端；实时性的数据
解决浏览器跟服务器的问题最初使用：
1、轮询（pull）。
问题太明显了，查询太频繁了。
总之很多问题。
比较好的两种方式
SSE
WebSocket
前端代码
<html>
<head>
<title>Java后端WebSocket的Tomcat实现</title>
</head>
<body>
Everybody吃瓜群众<br/><input id="text" type="text"/>
<marquee>暂无内容</marquee>
<button onclick="send()">发送消息</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<div id="message" style=" overflow:scroll; width:800px; height:400px;margin:auto;"></div>
</body> <script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
//localhost改成自己IP网
websocket = new WebSocket("ws://192.168.7.228:8080/websocket");
}
else {
alert('当前浏览器 Not support websocket')
} //连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket连接发生错误");
}; //连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket连接成功");
} //接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
} //连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket连接关闭");
} //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeWebSocket();
} //将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
} //关闭WebSocket连接
function closeWebSocket() {
websocket.close();
} //发送消息
function send() {
var message = document.getElementById('text').value;
websocket.send("匿名网友："+message);
document.getElementById('text').value="";
}
</script>
</html>
后台
package com.nf147.Web; import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.*;
import javax.websocket.server.ServerEndpoint; /**
* @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
* 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
*/
@ServerEndpoint("/websocket")
public class WebSocketTest {
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0; //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>(); //与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session; /**
* 连接建立成功调用的方法
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
} /**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(){
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
} /**
* 收到客户端消息后调用的方法
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
//群发消息
for(WebSocketTest item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
} /**
* 发生错误时调用
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error){
System.out.println("发生错误");
error.printStackTrace();
} /**
* 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException{
this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
} public static synchronized int getOnlineCount() {
return onlineCount;
} public static synchronized void addOnlineCount() {
WebSocketTest.onlineCount++;
} public static synchronized void subOnlineCount() {
WebSocketTest.onlineCount--;
}
}
效果
WebSocket 搭建简单聊天网站的更多相关文章
- SpringBoot 搭建简单聊天室
SpringBoot 搭建简单聊天室(queue 点对点) 1.引用 SpringBoot 搭建 WebSocket 链接 https://www.cnblogs.com/yi1036943655/p ...
- 使用Html5下WebSocket搭建简易聊天室
一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- nodejs+mongoose+websocket搭建xxx聊天室
简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...
- Jaguar_websocket结合Flutter搭建简单聊天室
1.定义消息 在开始建立webSocket之前,我们需要定义消息,如:发送人,发送时间,发送人id等.. import 'dart:convert'; class ChatMessageData { ...
- websocket实现简单聊天程序
程序的流程图: 主要代码: 服务端 app.js 先加载所需要的通信模块: var express = require('express'); var app = express(); var htt ...
- 用swoole和websocket开发简单聊天室
首先,我想说下写代码的一些习惯,第一,任何可配置的参数或变量都要写到一个config文件中.第二,代码中一定要有日志记录和完善的报错并记录报错.言归正传,swoole应该是每个phper必须要了解的, ...
- Netty 系列八（基于 WebSocket 的简单聊天室）.
一.前言 之前写过一篇 Spring 集成 WebSocket 协议的文章 —— Spring消息之WebSocket ,所以对于 WebSocket 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...
- 从零开始利用vue-cli搭建简单音乐网站（一）
最近在学习vue框架,练习了一些例子之后,想着搭建一个vue项目,了解到官方有提供一个vue-cli工具来搭建项目脚手架,尝试了一下,写下博客来记录一下. 一.工具环境 1.node.js 6.10. ...
随机推荐
- linux基础2-cd、mkdir、touch、umask、chattr、lsattr、SUID/SGID/Sticky Bit
一 cd : . 代表当前目录 .. 代表上一层目录 - 代表前一个工作目录 ~ 代表[目前用户身份]所在的自家目录 与cd效果相同 ~account 代表 account 这个用户的自家家目录 二m ...
- Caffe---Pycaffe进行网络结构(xxx.prototxt)可视化
Pycaffe---进行网络结构(xxx.prototxt)可视化 解决网络结构(xxx.prototxt)可视化,还可以借助python接口,编写一个类似如下的pycaffe_draw_net.py ...
- 洛谷 P3469 [POI2008]BLO-Blockade （Tarjan，割点）
P3469 [POI2008]BLO-Blockade https://www.luogu.org/problem/P3469 题目描述 There are exactly nn towns in B ...
- Golang对方法接收者变量的自动“取引用”和“解引用”
原文:https://blog.csdn.net/u014633283/article/details/83826413 --------------------------------------- ...
- linux运维面试前，先来检查这些基础知识忘了没？
知乎上有这样一个问题:一个新手面试 Linux 运维工作至少需要知道哪些知识?其中有一个答案对这一话题的解读非常深入,今天特别分享给大家. 一.什么是大型网站运维? 首先明确一下,全文所讲的”运维“是 ...
- centos7 nginx设置开启启动
添加系统服务 在 /usr/lib/systemd/system 目录中添加 nginx.service,根据实际情况进行修改,详细解析可查看下方参考资料中的文章.内容如下 ? [Unit] ...
- 【转载】@Component, @Repository, @Service的区别
@Component, @Repository, @Service的区别 官网引用 引用spring的官方文档中的一段描述: 在Spring2.0之前的版本中,@Repository注解可以标记在任何 ...
- 洛谷P4001 [BJOI2006]狼抓兔子（平面图转对偶图）
传送门 明明只要最小割加点优化就能过的东西…… 然而我偏偏要去学平面图转对偶图结果发现课件关键地方看不清->这里 而且建图累的半死…… 说实话只要最大流建图的时候反向边直接设为当前边容量再加个当 ...
- vue-cli使用less
vue-cli中使用less package.json 中添加 less,less-loader 之后不需要进行其他配置 在vue-cli构建的项目中 utils.js 已经帮我们引入了各种css编辑 ...
- Codeforces Round #587 (Div. 3) A. Prefixes
链接: https://codeforces.com/contest/1216/problem/A 题意: Nikolay got a string s of even length n, which ...