让每一名学员高薪就业
返回列表 发新帖

如何用WebSocket实现web在线聊天

[复制链接]

65

主题

217

帖子

2114

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2114

版主

发表于 2019-4-25 09:40:20  | 显示全部楼层 | 阅读模式
随着现在web项目的日益发展,web在线聊天用的非常多。所以要实现这个功能我们可以用WebSocket来做,现在奉上WebSocket的基本的代码。通过以下代码,大家学习之后就可以运用到你们的项目逻辑中。 后台代码 package cn.itsource.websocket;

import javax.sound.midi.Soundbank;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

/**
*
定义服务器,客户端可以通过url地址来连接服务器
*/
@ServerEndpoint("/server")
public class Server {
   
/**
     *
该类是set的实现类,是线程安全的,专门用来装客户端连接对象
     */
   
private static CopyOnWriteArraySet<Server> webSocketSet = new CopyOnWriteArraySet<Server>();
   
//发送数据到客户端需要session对象
   
private Session session;
   
@OnOpen
   
public void onOpen(Session session){
        
this.session = session;
        
webSocketSet.add(this);
        System.
out.println("客户端已经连接");
    }

   
@OnMessage
   
public  void onMessage(String message) throws IOException {
        
//接收客户端数据再通过服务器端发送
        
for (Server server : webSocketSet) {
            server.
session.getBasicRemote().sendText(message);
        }
    }

   
@OnClose
   
public void onClose(){
        
//当关闭的时候,删除客户端
        
webSocketSet.remove(this);
        System.
out.println("连接已经关闭");
    }

   
@OnError
   
public void onError(Session session,Throwable throwable){
        System.
out.println("发送错误");
        throwable.printStackTrace();
    }
}
前台代码 <%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  
<head>
   
<title></title>
  
</head>
  
<body>
  
<div id="content">

  
</div>
  
<input type="text" id="message"><input type="button" id="send" value="发送">
  
<script type="text/javascript">
         
if ("WebSocket" in window) {
              
// 通过url地址连接服务器端
              
var ws = new WebSocket("ws://localhost/server");

              
document.getElementById("send").onclick = function(){
                  
//获取输入信息
                  
var value = document.getElementById("message").value;
                  
//
                  
ws.send(value);
              }
            
//监听后台传递数据
              
ws.onmessage = function (evt) {
                  
//获取服务器端返回的数据
                  
var received_msg = evt.data;
                  
//获取div中内容
                  
var html = document.getElementById("content").innerHTML;
                  
//重新给div赋值
                  
document.getElementById("content").innerHTML = html+"<br/>"+received_msg;
              };
          }
else {
              
// 浏览器不支持 WebSocket
              
alert("您的浏览器不支持 WebSocket!");
          }
  
</script>
  
</body>
</html>
回复

使用道具 举报

0

主题

5

帖子

7

积分

菜鸟

Rank: 1

积分
7
发表于 2019-4-25 09:40:25  | 显示全部楼层
有个老师讲的特别好。
回复 支持 反对

使用道具 举报

0

主题

3

帖子

15

积分

菜鸟

Rank: 1

积分
15
发表于 2019-4-25 09:41:44  | 显示全部楼层
老师,你上课么
回复 支持 反对

使用道具 举报

0

主题

6

帖子

4

积分

菜鸟

Rank: 1

积分
4
发表于 2019-4-25 09:42:07  | 显示全部楼层
大家都来撩源妹儿!
回复 支持 反对

使用道具 举报

0

主题

9

帖子

4

积分

菜鸟

Rank: 1

积分
4
发表于 2019-4-25 09:42:38  | 显示全部楼层
我想知道源妹儿是谁
回复 支持 反对

使用道具 举报

0

主题

1

帖子

1

积分

菜鸟

Rank: 1

积分
1
发表于 2019-4-25 09:42:45  | 显示全部楼层
培训多久毕业
回复 支持 反对

使用道具 举报

0

主题

5

帖子

105

积分

民工

Rank: 2

积分
105
发表于 2019-4-27 11:25:44  来自手机  | 显示全部楼层
现在都是用netty啊之类的通信框架来做这个,用原生websocket就是个坑
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表