首页 \ 教程 \ Java

WebSocket教程

WebSocket入门教程

spring WebSocket整合

在SpringMVC中使用WebSocket

开源项目

Jersey

知识点

Java

WebSocket介绍

WebSocket实例详解

在SpringMVC中使用WebSocket

3天教你搞定JavaWeb聊天室项目

即时通信技术-Websocket在线聊天视频教程

java聊天室问题（有钱给补上，不胜感激！）

分享一个免费的聊天api

Solr示例

Linux命令详解词典( 施威铭研究室)

文东工作室开通微信公众号了！欢迎订阅！~

(根据此法在办公室机器上成功安装了Solr)

一个关于java数据报做的简单聊天的问题

如何电脑上怎样查看微信聊天记录

redis整合spring示例一

在线聊天系统-尚学堂视频教程

WebSocket 聊天室示例

2019-03-22 23:43|来源: 网路

基本思路：

1、用户登录，把用户名存到session中，然后跳转到聊天页面chat.jsp

2、在chat.jsp加载完成后，向WebSocket服务端发起连接请求

3、WebSocket服务端接收到客户端请求后，把session存放在Set集合中，方便以后群聊的时候使用，同时向所有连接的客户端发起欢迎信息

4、实现群聊

用户登录页面，这里简单实现，只要输入一个用户名即可提交

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<form action="loginServlet" method="post">
    用户名： <input name="username"/><br/>
    <input type="submit"/>
</form>
</body>
</html>

建立一个Servlet接收登录请求，并把该用户保存到Session中，然后跳转到添天页面

package com._656463.demo.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
public class LoginServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("username");
        HttpSession session = request.getSession();
        session.setAttribute("user", username);
        response.sendRedirect("chat.jsp");
    }
}

web.xml 配置LoginServlet

<servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com._656463.demo.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/loginServlet</url-pattern>
</servlet-mapping>

聊天页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <script type="text/javascript">
        var user='${sessionScope.user}';
        var users=[];
        var ws;  // 管理登陆，退出，用户列表的 socket
        var ws2;  // 管理聊天 的 socket
        window.onload= ws_init;
        function  ws_init(){
            var target="ws://192.168.56.101:8080/chat?username="+user;
            if ('WebSocket' in window) {
                ws = new WebSocket(target);
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket(target);
            } else {
                alert('WebSocket is not supported by this browser.');
                return;
            }
            ws.onopen=function(){
                showMsg("webSocket通道建立成功！！！");
            };
            ws.onmessage=function(event){
                ;
                console.info(msg);
                if(msg.welcome!=undefined)
                    showMsg(msg.welcome);
                if(msg.usernames!=undefined)
                    showUser(msg.usernames);
                if(msg.from!=undefined){
                    showContent(msg);
                }
            }
        }
        function showMsg(msg){
            var content= document.getElementById("content");
            content.innerHTML+=msg+"<br/>";
        }
        function showUser(users){
            if(users.length==0) return;
            var userList= document.getElementById("userList");
            userList.innerHTML="";
            for(var i=0;i<users.length;i++){
                userList.innerHTML+= users[i]+"<br/>";
            }
        }
        function showContent(msg){
            var content= document.getElementById("content");
            content.innerHTML+=msg.from+"--"+msg.date+"<br/>"+msg.content+"<br/>";
        }
        function ws_send(){
            var msg= document.getElementById("msg");
            var temp="{from:'"+user+"',content:'"+msg.value+"'}";
            ws.send(temp);
            msg.value="";
        }
    </script>
</head>
<body>
<h1>这里是聊天室 ， 欢迎 ${sessionScope.user }进入聊天</h1>
<div id="content" style="background-color: aqua; width: 500px; height:400px;float:left;">
   <!-- 这个div显示所有的  聊天信息的内容 -->
</div>
<div id="userList" style="background-color: olive; width: 200px; height:400px;float: left;">
    <!--
        这个div 显示所有的在线用户
        这里要 显示两部分内容 是不是以为这要  两个 webSocket通道才能完成呢？？
        一个通道能否完成！！
        回答：  两个webSocket通道 显然更加简单一些啊。。。
     -->
</div>
<div style="margin-top: 10px;  clear: both;">
    <input id="msg"/>
    <button onclick="ws_send();">send</button>
</div>
</body>
</html>

WebSocket实现聊天的服务端程序：

package com._656463.demo.websocket;
import com._656463.demo.vo.Msg;
import com.google.gson.Gson;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.*;
/**
 * 聊天socket
 */
@ServerEndpoint("/chat")
public class ChatSocket {
    private static Set<ChatSocket> ss = new HashSet<ChatSocket>();
    private static List<String> usernames=new ArrayList<String>();
    private Session  session ;
    private String username;
    private Gson gson=new Gson();
    @OnOpen
    public void open(Session session) {
        System.out.println("建立了一个 webSocket通道！！！  sid:" + session.getId());
        String queryString = session.getQueryString();
        this.username = queryString.substring(queryString.indexOf("=") + 1);
        ss.add(this);
        usernames.add(username);
        this.session = session;
        Map<String,Object> welcomeMsg = new HashMap<String,Object>();
        welcomeMsg.put("welcome",username + "进入聊天室！！");
        welcomeMsg.put("usernames",usernames);
        //login对象转为  json格式
        String msg = gson.toJson(welcomeMsg);
        broadcast(ss, msg);
    }
    @OnClose
    public void close() {
        ss.remove(this);
        usernames.remove(username);
        Map<String,Object> logoutMsg = new HashMap<String,Object>();
        logoutMsg.put("welcome",username + "退出聊天室！！");
        logoutMsg.put("usernames",usernames);
        String msg = gson.toJson(logoutMsg);
        broadcast(ss, msg);
    }
    @OnMessage
    public void receiveMsg(Session session, String content) {
        System.out.println("收到信息啦 ， 来自sid:" + session.getId());
        System.out.println("信息：" + content);
        Msg msg = gson.fromJson(content, Msg.class);
        msg.setDate(new Date().toLocaleString());
        broadcast(ss, gson.toJson(msg));
    }
    private void broadcast(Set<ChatSocket> ss, String msg) {
        for (Iterator iterator = ss.iterator(); iterator.hasNext(); ) {
            ChatSocket chat = (ChatSocket) iterator.next();
            try {
                chat.session.getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

WebSocket教程

开源项目

知识点

相关文章

最近更新

WebSocket 聊天室示例

相关问答

csdn java聊天室私人对话程序[2023-04-01]

如何搭建websocket服务器[2023-11-26]

haskell websocket示例(haskell websocket example)[2023-07-27]

Websocket群组聊天的最佳实践/所有群组的一个websocket或每个群组一个websocket？(Websocket best practice for groups chat / one websocket for all groups or one websocket per group?)[2023-08-17]

Xmpp Vs Websocket(Xmpp Vs Websocket)[2023-06-22]

Websocket聊天实现(Websocket chat implementation)[2022-03-21]

OCaml Websocket示例(OCaml Websocket example)[2022-05-18]

WebSocket聊天异步示例崩溃(WebSocket Chat Async Example Crash)[2022-01-27]

使用rust-websocket聊天(Chat using rust-websocket)[2023-05-07]

如何避免websocket重新连接(How to avoid websocket reconnection)[2023-01-13]