WebScoket 实例 简单的网页聊天室
生活随笔
收集整理的這篇文章主要介紹了
WebScoket 实例 简单的网页聊天室
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
WebScoket 是H5的新特性 具體的可以百度，
首先html
<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <style type="text/css"> * {margin: 0px;padding: 0px; }#container {border: 1px solid;position: relative;margin: auto;margin-top: 50px;width: 500px;height: 500px; }#text-container {border-top: 1px solid;position: absolute;width: 100%;height: 100px;bottom: 0px; }#link-container {position: absolute;width: 100%;height: 40px;border-bottom: 1px solid; }#link-container input {margin-left: 10px;border: none;outline: medium;border: 0.5px solid;width: 120px;margin-top: 5px;height: 30px; }#link-container #link-server {display: inline-block;border: 0.5px solid;text-align: center;line-height: 28px;width: 50px;height: 28px; }#text-container textarea {position: absolute;font-size: 24px;margin-left: 2px;width: 80%;height: 90%;border: none;outline: medium; }#send {position: absolute;left: 80%;width: 20%;height: 100%;text-align: center;line-height: 100px;border-left: 1px solid;font-size: 24px; }#chat-body {position: absolute;top: 42px;width: 100%;height: 355px;overflow: auto;overflow-y: auto; }.mymsg {position: absolute;top: 50px;width: 180px;height: auto;word-wrap: break-word;word-break: break-all;overflow: hidden;right: 5px; }.hermsg {position: absolute;top: 100px;width: 180px;text-align: left;height: auto;word-wrap: break-word;word-break: break-all;overflow: hidden;left: 5px; } </style> <title>聊天室</title> <body> <div id="container"><div id="link-container">輸入姓名： <input type="text" name="" id="name" value="" /> <spanid="link-server"> 鏈接 </span></div><div id="chat-body"><span></span></div><div id="text-container"><textarea name="" rows="" cols=""></textarea><div id="send">發送</div></div></div></head></body><script src="js/jquery-1.9.0.min.js" type="text/javascript"charset="utf-8"></script><script type="text/javascript">var socket;$("#link-server").click(function() {var name = $("#name").val()if (name == "") {alert("請輸入姓名")} else {var url = "ws://localhost:8080/chartRoom/room/" + name;socket = new WebSocket(url);socket.onopen = function() {alert("鏈接成功")}socket.onclose = function(event) {alert("服務器斷開鏈接")};//接收數據事件socket.onmessage = function(event) {var span = "<span class='hermsg'>" + event.data + "</span>"var li = $("#chat-body span:last-child").css([ 'top', 'height' ]);var top = li.top;var height = li.height;$("#chat-body").append(span)var top1 = parseInt(top.substring(0, top.length - 2));var heigth1 = parseInt(height.substring(0, height.length - 2));var tops = top1 + heigth1 + 15;$("#chat-body span:last-child").css({"top" : tops + "px"})}}})$("#send").click(function() {var msg = $("#text-container textarea").val();if (msg == "") {alert("請輸入內容")} else {socket.send(msg);var span = "<span class='mymsg'>" + "我說：" + msg + "</span>"var li = $("#chat-body span:last-child").css([ 'top', 'height' ]);var top = li.top;var height = li.height;$("#chat-body").append(span)var top1 = parseInt(top.substring(0, top.length - 2));var heigth1 = parseInt(height.substring(0, height.length - 2));var tops = top1 + heigth1 + 15;$("#chat-body span:last-child").css({"top" : tops + "px"})reset()}})//清空輸入框function reset() {$("#text-container textarea").val("");}//在瀏覽器刷新或者關閉的時候斷開鏈接window.onbeforeunload = function() {socket.close();}</script></html>再是服務端的代碼。。
前端需要注意的是 new WebScoket中的 url? 其寫法為"ws://localhost:8080/chartRoom/room/" + name; ?
名稱以ws開頭 類似于http? 再是你的ip地址和端口號? charRoom為項目的名稱 room為當前服務端@ServerEndpoint("/room/{param}")中注解的 地址 name就是注解中的參數 param
package com.qhit.web.scoket;import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet;import javax.websocket.CloseReason; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; //這里的parm是瀏覽器傳來的參數 @ServerEndpoint("/room/{param}") public class ChartRoom {private Session session;private String name;//這里采用線程安全的set單例集合來存放聊天室的用戶對象private static CopyOnWriteArraySet<ChartRoom> set = new CopyOnWriteArraySet<>();// 連接打開時執行@OnOpenpublic void onOpen(@PathParam(value = "param") String param, Session session) throws IOException {//因為我用的tomcat版本是7.0的所以要進行轉碼String name = new String(param.getBytes("iso8859-1"), "utf-8");System.out.println(name);this.name = name;this.session = session;set.add(this);System.out.println("歡迎" + this.name + "進入聊天室");//如果這個集合 不為空 則遍歷集合 給每個用戶 發送消息if (set != null) {for (ChartRoom chartRoom : set) {chartRoom.sendMessage("歡迎" + this.name + "進入聊天室");}} else {sendMessage("歡迎" + this.name + "進入聊天室");}}// 收到消息時執行@OnMessagepublic void onMessage(String message, Session session) {//客戶端收到消息的時候 遍歷集合 然后實現消息的廣播for (ChartRoom socket : set) {try {if (socket != this) {//這里是自定義的廣播方法socket.sendMessage(this.name + "說:" + message);}} catch (IOException e) {}}}// 連接關閉時執行@OnClosepublic void onClose(Session session, CloseReason closeReason) {//當用戶退出的時候 在set集合中刪除當前對象set.remove(this);System.out.println(this.name+"退出了聊天室");}// 連接錯誤時執行@OnErrorpublic void onError(Throwable t) {t.printStackTrace();}// 自定義的方法，用于發送消息public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message);// this.session.getAsyncRemote().sendText(message);}}這樣 一個簡單的聊天室就寫好了
下面看 效果圖把
總結
以上是生活随笔為你收集整理的WebScoket 实例 简单的网页聊天室的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页聊天室开发思路独家分享
- 下一篇： 经验：作为IT人，如何靠副业赚到第一桶金