websocket实现简易聊天室

websocket支持全双工通信,也就是客户端和服务端双向通信。以前都是通过http轮询的方式实现实时的,这非常耗性能。Websocket不仅能节省资源和带宽,还能实现长链接的作用

 

 

前端通过创建WebSocket对象,然后通过addEventListener方法来监听启动服务(open方法)和接受数据(message方法)

前端准备:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 71%;
            height: 500px;
            border: 1px solid green;
            margin-left: 10px;
        }

        input {
            width: 70%;
            height: 30px;
            border: 1px solid lightpink;
            outline: none;
            margin: 10px;
        }

        button {
            width: 100px;
            height: 30px;
            border: 1px solid lightpink;
            color: lightpink;
        }
    </style>
</head>

<body>
    <input type="text">
    <button>点击发送</button>
    <div class="box"></div>
    <script>
        var input = document.getElementsByTagName('input')[0]
        var btn = document.getElementsByTagName('button')[0]
        var box = document.querySelector('.box')
        //创建WebSocket对象
        var ws = new WebSocket('ws://127.0.0.1:8081')
        //启动socket服务
        ws.addEventListener('open', function () {
            box.innerHTML = '连接服务已启动~'
        })
        //接收数据
        ws.addEventListener('message', function (e) {
            box.appendChild(transformMsg(e))
        })
        //点击按钮发送数据
        btn.addEventListener('click', function () {
            var value = input.value
            input.value = ''
            ws.send(value)
        })

        //生成p标签
        function transformMsg(e) {
            var data = JSON.parse(e.data)
            console.log(data)
            var p = document.createElement('p')
            p.innerText = data.msg + '---' + data.time
            if (data.type === 0) {
                p.style.color = 'green'
            } else if (data.type === 1) {
                p.style.color = 'black'
            } else {
                p.style.color = 'red'
            }
            return p
        }
    </script>
</body>

</html>

后端通过引入nodejs-websocket依赖包,通过conn.on方法来监听消息接收,连接关闭及连接异常

//下载依赖
npm install nodejs-websocket

注意:聊天室的实现需要服务器接收到消息后对消息进行广播来实现,所以会通过server.connections.forEach来逐个发送消息

后端代码: 

// 引入nodejs-websocket包
const ws = require('nodejs-websocket')

// 当前所处状态
const type_ENTER = 0 //进入聊天室状态
const type_DATA = 1 //发送信息状态
const type_LEAVE = 2 //离开聊天室状态
var count = 0 //当前用户数量
var server = ws.createServer(function (conn) {
    console.log("有用户连接了");
    count++
    conn.userName = `用户${count}`
    brodCast({
        type: type_ENTER,
        msg: `${conn.userName}进入了聊天室~`,
        time: new Date().toLocaleTimeString()
    })
    // 监听消息
    conn.on("text", function (str) {
        brodCast({
            type: type_DATA,
            msg: str,
            time: new Date().toLocaleTimeString()
        })
    })
    // 监听连接关闭
    conn.on("close", function (code, reason) {
        count--
        brodCast({
            type: type_LEAVE,
            msg: `${conn.userName}离开了聊天室~`,
            time: new Date().toLocaleTimeString()
        })
    })
    // 监听异常
    conn.on('error', () => {
        console.log("用户连接异常~");
    })
})

// 广播
function brodCast(msg) {
    server.connections.forEach(item => {
        item.send(JSON.stringify(msg))
    })
}
server.listen(8081, () => {
    console.log("websocket服务启动成功了~");
})

废话不多说,咱们来看一下效果:

 当用户离开时:

 websocket不仅可以实现聊天功能,还可以使用解决跨域问题,因为websocket不附属于浏览器的同源策略,而且它本身就有意被设计成可以跨域的一个手段。由于历史原因,跨域检测一直是由浏览器端来做,但是WebSocket出现以后,对于WebSocket的跨域检测工作就交给了服务端,浏览器仍然会带上一个Origin跨域请求头,服务端则根据这个请求头判断此次跨域WebSocket请求是否合法

以上就是关于websocket的介绍,希望能帮到大家 !!!

  • 10
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Java WebSocket是一种用于实现双向通信的网络协议,可以帮助我们实现简易聊天室。下面是一个基于Java WebSocket实现简易聊天室的示例代码: 首先,我们需要定义一个WebSocket处理程序: ```java @ServerEndpoint("/chat") public class ChatEndpoint { private static Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>()); @OnOpen public void onOpen(Session session) { sessions.add(session); } @OnMessage public void onMessage(String message, Session session) throws IOException { for (Session s : sessions) { // 过滤自己 if (!s.equals(session)) { s.getBasicRemote().sendText(message); } } } @OnClose public void onClose(Session session) { sessions.remove(session); } } ``` 在这个处理程序中,我们使用`@ServerEndpoint("/chat")`注解指定了WebSocket的端点,即`/chat`。在`onOpen`方法中,我们将新的会话添加到会话集合中。在`onMessage`方法中,我们将接收到的消息广播给所有其他会话。在`onClose`方法中,我们将关闭的会话从会话集合中移除。 接下来,我们需要在`web.xml`文件中配置WebSocket: ```xml <web-app> <display-name>WebSocket Chat</display-name> <servlet> <servlet-name>chat</servlet-name> <servlet-class>org.glassfish.tyrus.servlet.TyrusServlet</servlet-class> <init-param> <param-name>org.glassfish.tyrus.servlet.websocketClassnames</param-name> <param-value>com.example.ChatEndpoint</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>chat</servlet-name> <url-pattern>/chat/*</url-pattern> </servlet-mapping> </web-app> ``` 在这个配置中,我们使用了`org.glassfish.tyrus.servlet.TyrusServlet`作为WebSocket的Servlet。我们将`com.example.ChatEndpoint`指定为WebSocket处理程序的类名,并将其加载到`servlet`中。 现在,我们就可以在HTML页面中使用WebSocket来连接我们的聊天室了: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Chat</title> </head> <body> <input type="text" id="message"> <button onclick="send()">Send</button> <div id="output"></div> <script> var socket = new WebSocket('ws://localhost:8080/chat'); socket.onmessage = function (event) { var output = document.getElementById('output'); output.innerHTML += event.data + '<br>'; }; function send() { var message = document.getElementById('message').value; socket.send(message); } </script> </body> </html> ``` 在这个HTML页面中,我们创建了一个WebSocket连接到`ws://localhost:8080/chat`。当收到消息时,我们将其添加到页面上的`<div>`元素中。当点击发送按钮时,我们将输入框中的文本发送到WebSocket连接中。 这样,我们就完成了一个简易的Java WebSocket聊天室实现
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是个程序员吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值