分享基于 websocket 网页端聊天室

博客地址：https://ainyi.com/67

有一个月没有写博客了，也是因为年前需求多、回家过春节的原因，现在返回北京的第二天，想想，应该也要分享技术专题的博客了！！

主题

WebSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工 (full-duplex) 通信——允许服务器主动发送信息给客户端。

使用 java 开发后台

需要导入一个jar包：javax.websocket-api-1.0-rc4.jar

后台代码

package com.krry.socket;

import java.io.IOException;

import java.util.concurrent.CopyOnWriteArraySet;

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;

//该注解用来指定一个URI，客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。

@ServerEndpoint("/websocket")

public class MyWebSocket {

    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。

    private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识

    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据

    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(MyWebSocket 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() {

        MyWebSocket.onlineCount++;

    }

    public static synchronized void subOnlineCount() {

        MyWebSocket.onlineCount--;

    }

}

前端代码

注意

前端需要实现这几个方法：

  // 注册事件

  // 监听打开连接

  ws.onopen = function(){

    openWs();

  };

  // 监听消息

  ws.onmessage = function(event){

    msgWs(event);

  };

  // 监听关闭连接

  ws.onclose = function(){

    closeWs();

  };

  // 监听发送错误

  ws.onerror = function(){

    errorWs();

  };

具体代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!doctype html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <meta name="keywords" content="">

    <meta name="description" content="">

    <title>

      基于Java服务器端的消息主动推送技术揭秘 --krry

    </title>

    <link rel="stylesheet" href="css/animate.css" />

    <link rel="stylesheet" type="text/css" href="css/sg.css" />

    <style>

      *{margin:0;padding:0;} body{background:url("images/5.jpg");background-size:cover;}

      h1{margin-top:50px;text-align:center;color:#fff;text-shadow:1px 1px 1px

      #000;font-family:-webkit-body;font-size:24px;} .box{width:700px;margin:20px

      auto;} .box span{color:#f60;font-size:16px;font-family:"微软雅黑";} .box .shu{text-indent:1em;height:24px;font-family:"微软雅黑";border:0;outline:none;font-size:14px;}

      .box .add{width:300px;margin-right:24px;} .box .user{width:200px;} .box

      .btn{width:80px;height:34px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;margin-top:20px;font-size:16px;font-family:"微软雅黑";}

      .box .area{line-height: 29px;height:280px;width:680px;padding:10px;overflow:auto;font-size:16px;font-family:"微软雅黑";margin:20px

      0;outline:none;box-shadow:1px 2px 18px #000} .box .setex{text-indent:1em;height:28px;border:1px

      solid #6c0;width:618px;outline:none;float:left;font-family:"微软雅黑";} .box

      .send{font-size:14px;width:80px;height:30px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;font-family:"微软雅黑";}

    </style>

  </head>

  <body>

    <h1>

      基于Java服务器端的消息主动推送技术揭秘 --krry

    </h1>

    <div class="box">

      <span>

        服务器地址：

      </span>

      <input type="text" class="shu add" value="www.ainyi.com/krry_NetChat/websocket"

      readonly/>

      <span>

        用户名：

      </span>

      <input type="text" class="shu user" value="匿名" />

      <input type="button" value="连接" class="btn" />

      <div class="area" id="boxx">

      </div>

      <div class="c_cen">

        <input type="text" class="setex" />

        <input type="button" value="发送" class="send">

      </div>

    </div>

    <script src="js/jquery-1.11.1.min.js">

    </script>

    <script src="js/sg.js">

    </script>

    <script src="js/sgutil.js">

    </script>

    <script>

      var close = true;

      var ws;

      $(function() {

        $(".c_cen").hide();

        //首先判断浏览器是否支持webSocket，支持h5的浏览器才会支持

        if (window.WebSocket) {

          printMsg("您的浏览器支持WebSocket，您可以尝试连接到聊天服务器！", "OK");

        } else {

          printMsg("您的浏览器不支持WebSocket，请选择其他浏览器！", "ERROR");

          //设置按钮不可点击

          $(".btn").attr("disabled", "true");

        }

      });

      //打印信息

      function printMsg(msg, msgType) {

        if (msgType == "OK") {

          msg = "<span style='color:green'>" + msg + "</span>";

        }

        if (msgType == "ERROR") {

          msg = "<span style='color:red'>" + msg + "</span>";

        }

        $(".area").append(msg + "<br/>");

        var boxx = document.getElementById("boxx");

        boxx.scrollTop = boxx.scrollHeight; //使滚动条一直在底部

      }

      //打开Socket

      function openWs() {

        printMsg("链接已建立", "OK");

        ws.send("【" + $(".user").val() + "】已进入聊天室");

        $(".c_cen").show();

      }

      //接收消息的时候

      function msgWs(e) {

        printMsg(e.data);

      }

      //关闭连接

      function closeWs() {

        $(".btn").val("连接");

        $(".c_cen").hide();

      }

      //产生错误

      function errorWs() {

        printMsg("您与服务器连接错误...", "ERROR");

      }

      //点击发送按钮

      $(".send").click(function() {

        var text = $(".setex").val();

        if (text == null || text == "") return;

        $(".setex").val("");

        ws.send("【" + $(".user").val() + "】：" + text);

      });

      //点击连接

      $(".btn").click(function() {

        if ($(".add").val() && $(".user").val()) {

          if (close) {

            printMsg("正在准备连接服务器，请稍等...");

            var url = "wss://" + $(".add").val();

            if ("WebSocket" in window) {

              ws = new WebSocket(url);

            } else if ("MozWebSocket" in window) {

              ws = new MozWebSocket(url);

            }

            //已连接

            $(".btn").val("断开");

            close = false;

            //注册事件

            ws.onopen = function() {

              openWs();

            };

            ws.onmessage = function(event) {

              msgWs(event);

            };

            ws.onclose = function() {

              closeWs();

            };

            ws.onerror = function() {

              errorWs();

            };

            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

            window.onbeforeunload = function() {

              ws.send("【" + $(".user").val() + "】离开了聊天室");

              close = true;

              ws.close();

            };

          } else {

            ws.send("【" + $(".user").val() + "】离开了聊天室");

            close = true;

            ws.close();

          }

        } else {

          $.tmDialog.alert({

            open: "left",

            content: "服务器地址和用户名不能为空哦...",

            title: "提示哦~~~"

          });

        }

      });

      //回车键

      $(".setex").keypress(function(event) {

        if (event.keyCode == 13) {

          $(".send").trigger("click");

        }

      });

    </script>

  </body>

</html>

到这里大功告成

聊天方法

来一波截图

移动端

在线演示

PC 端：https://www.ainyi.com/krry_NetChat

移动端：https://www.ainyi.com/krry_NetChatPho

打完收工~

博客地址：https://ainyi.com/67

分享基于 websocket 网页端聊天室

主题

后台代码

前端代码

注意

具体代码

聊天方法

来一波截图

移动端

在线演示

分享基于 websocket 网页端聊天室的相关教程结束。

相关推荐

WebSocket实现聊天室业务的方法

Java SpringMVC实现PC端网页微信扫码支付完整版

Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用

无废话网页重构系列——（3）Web重构前的分析

【Python爬虫】批量爬取网页的图片&制作数据集

如何制作 Storybook Day 网页上的 3D 效果？

Spring AOP 分享

百行go代码构建p2p聊天室