WebSocket创建局域网在线聊天室

最新推荐文章于 2024-03-09 23:48:06 发布

ZhangY1217

最新推荐文章于 2024-03-09 23:48:06 发布

阅读量3.6k

点赞数 2

分类专栏： java myMark 文章标签： WebSocket javascript java jsp html5

本文链接：https://blog.csdn.net/zhangy1217/article/details/85045316

版权

java 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

myMark

2 篇文章 0 订阅

订阅专栏

WebSocket的简要介绍：

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。关于WebSocket的详细使用可以看菜鸟教程。

下面的则是我使用WebSocket搭建的一个简单在线聊天室的maven项目

1.创建maven项目

2.添加依赖，依赖如下：

 <dependencies>
    <!-- https://mvnrepository.com/artifact/javax/javaee-api -->
    <dependency>
      <groupId>javax</groupId>
      <artifactId>javaee-api</artifactId>
      <version>7.0</version>
      <scope>provided</scope>
    </dependency>

  </dependencies>

3.创建java文件，客户端的连接、关闭、消息发送的回调方法的处理类

package com.marvin.websocket;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/websocket")
public class MyWebSocket {
    //定义静态变量用来记录在线人数
    private  static  int onLineCount=0;
    //定义线程安全set集合，若要实现单个客户端和服务器通信使用map
    private static CopyOnWriteArraySet<MyWebSocket> webSockets=new CopyOnWriteArraySet<>();
    //定义session句柄
    private Session session;
    //建立连接成功后调用的方法
    @OnOpen
    public void onOpen(Session session){
        this.session=session;
        webSockets.add(this);
        //人数加加
        onLineCount++;
        String message=String.format("<span style='color: rgba(55,55,55,.3);font-size: 12px'>欢迎%s的到来</span>",session.hashCode());
        try {
            for (MyWebSocket webSocket : webSockets) {
                webSocket.sendMessage(message+"#在线人数："+onLineCount);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    //关闭连接的回掉方法
    @OnClose
    public void onClose(Session session){
        this.session=session;
        webSockets.remove(this);
        //人数减减
        onLineCount--;
        try {
            for (MyWebSocket webSocket : webSockets) {
                webSocket.sendMessage("#在线人数："+onLineCount);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    //接收到客户端消息后的回掉方法
   @OnMessage
   public void onMessage(String message,Session session){
    try {
       for (MyWebSocket webSocket : webSockets) {
               webSocket.sendMessage(String.format("%s: %s",session.hashCode(),message));
           }
    } catch (IOException e) {
           e.printStackTrace();
       }
   }
    @OnError
    public void onError(Session session,Throwable error){
        System.out.println("系统发生错误");
        error.printStackTrace();
    }

    //客户端发送消息
    private void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
}

4.创建一个jsp页面

<%--
  Created by IntelliJ IDEA.
  User: zy
  Date: 2018/11/15
  Time: 14:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>在线聊天室</title>
    <style>
        .msg{
            width: 500px;
            height: 400px;
            background: rgba(55,55,55,0.5);
            overflow: paged-y;
        }
        .onlinecount{
            width: 500px;
            height: 20px;
            background:rgb(55,55,55);
            display: inline-block;
            text-align: center;
            color: aliceblue;
        }
        .btn{
            margin-left: 20px;
        }
    </style>
    <script src="js/webSocket.js"></script>
</head>
<body>
<span class="onlinecount"></span>
<div class="msg">

</div>
<input type="text" placeholder="请输入..." class="inputText"/>
<button type="button" class="btn" onclick="sendMsg()">发送</button>
</body>
</html>

5.创建js

Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：

ws://example.com/wsapi
wss://secure.example.com/

Websocket 使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket 协议使用 80 端口；运行在 TLS 之上时，默认使用 443 端口。使用本机的ip地址就可以实现局域网的通信，使用127.0.0.1则只能本机通信

//定义webscocket
var webSocket=null;
//判断当前浏览器是否支持websocket
if('WebSocket' in window){
    webSocket=new WebSocket("ws://192.168.0.125:8080/websocket");
}else {
    alert("当前浏览器不支持WebSocket");
}
//连接错误回掉函数
webSocket.onerror=function () {
sendMessage("链接失败");
}
//连接成功回掉函数
webSocket.onopen=function () {
    console.log("连接成功");
}
//消息接受成功回掉函数
webSocket.onmessage=function (event) {
        sendMessage(event.data);
}
//连接关闭回掉函数
webSocket.onclose=function () {
    sendMessage("关闭连接");
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，
// 防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload=function () {
    webSocketClose();
}
//发送消息
function sendMsg(){
    //getElementsByClassName获取的是一个数组
    var txt=document.getElementsByClassName("inputText")[0].value;
   webSocket.send(txt);
}
//关闭连接
function webSocketClose(){
    webSocket.close();
}


//消息处理函数
function sendMessage(date) {
    if(date.indexOf("#")>=0){
        document.getElementsByClassName("msg")[0].innerHTML+=event.data.split("#")[0]+"<br>";
        document.getElementsByClassName("onlinecount")[0].innerHTML=event.data.split("#")[1];
    }else {
    document.getElementsByClassName("msg")[0].innerHTML+=date+"<br>";
    }
}

ZhangY1217

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
WebSocket创建局域网在线聊天室

WebSocket的简要介绍：WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览...
复制链接

扫一扫