2. 程式人生 > >websocket-chat:一個網頁聊天小程式

websocket-chat:一個網頁聊天小程式

阿新 • • 發佈：2018-12-06

頁面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable"
 
 content="yes" />
<title>不忘初心</title>
<link rel="shortcut icon" href="skin/img/favicon48.ico">
<script src="skin/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="skin/css/chat.css" type="text/css" />
<link href="skin/bootstrap-3.3.7-dist/css/bootstrap.min.css"
 
 rel="stylesheet">
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="skin/bootstrap-3.3.7-dist/js/bootstrap.min.js"
 
></script>
    
<script type="text/javascript">
    $(function() {
        var url = "ws://113.128.104.115:1314/chat/ChatServer";
        var ws = null;
        var nickname = "";
        
        $('#myModal').modal('show');
        $('#myModal').on('shown.bs.modal', function () {
            $("#nickname").val("小新");
            $("#nickname").focus();
            $("#nickname_btn").click();
        })
        $("form#nickname_form").submit(function(){ //傳送暱稱，連線聊天室
            nickname = $("#nickname").val().trim();
            if (nickname === "") {
                alert("請輸入暱稱！");
            } else {
                ws_connect();
                $('#myModal').modal('hide');
            }
            return false;
        });
        $("#nickname_btn").click(function(){ //輸入暱稱點選進入觸發，進入聊天
            $("form#nickname_form").submit();
        });
            
        function ws_connect() { //連線ws，建立通訊
            nickname = window.btoa(unescape(encodeURIComponent(nickname)));
            if (ws == null) {
                ws = new WebSocket(url + "?" + nickname);
                ws.onopen = function() {
                    console.log("連線成功——ws.onopen");
                };
                ws.onmessage = function(evt) {
                    var data = evt.data;
                    if(data.trim() === ""){
                        return;
                    }
                    var msg ="";
                    if(data.indexOf("{") == 0){
                        var obj = JSON.parse(data);
                        if(obj["me"] == 1){
                            nickname = obj["nickname"];
                            msg = '<div class="mine_user hidden"><div class="triangle"></div><div class="say">' + obj["msg"] + '</div></div>'

                        }else{
                            msg = '<div class="other_user hidden"><div class="triangle"></div><div class="say">' + obj["msg"] + '</div></div>'

                        }
                        obj["time"]
                    }else{
                        msg = data;
                    }
                    $("#content").append(msg);
                    toBottom();
                };
                ws.onclose = function(evt) {
                    console.log("連線關閉——ws.onclose");
                };
                ws.onerror = function(evt) {
                    console.log("連接出錯——ws.onerror");
                };
            }
        }
        
        function setContentHeight(){  //調整顯示區域正好填滿整個頁面
            var h = $(window).height();
            var body_pading_top = parseInt($("body.container").css("padding-top").replace("px", ""));
            var body_pading_bottom = parseInt($("body.container").css("padding-bottom").replace("px", ""));
            var body_margin_top = parseInt($("body.container").css("margin-top").replace("px", ""));
            var body_margin_bottom = parseInt($("body.container").css("margin-top").replace("px", ""));
            var content_margin_h = $("div#content").outerHeight(true) - $("div#content").outerHeight();
            var inputGroup_h = $("div.input-group").height();
            var content_h = h - content_margin_h - inputGroup_h - body_pading_top - body_pading_bottom - body_margin_top - body_margin_bottom;
            $("div#content").css({"height":content_h + "px"});
        }
        
        setContentHeight();
        $(window).resize(function() { //視窗大小變化觸發
            setContentHeight();
        });
        
        function toBottom(){ //將聊天內容區域滾動條滾到最下面
            $("div.hidden").each(function(){  //將太寬的顯示縮窄
                $(this).removeClass("hidden");
                var i = $(this).find(".say:last").width();
                if(i+5 > $(this).width()*0.85){
                    $(this).find(".say").css("width", "85%");
                }
            });
            var sh = $("div#content").prop("scrollHeight");
            $("div#content").animate({"scrollTop": sh}, 200);
        }
        
        
//      $("input#sendcontent").focus(function(){
//          setTimeout(function() {
//              $(window).scrollTop(10000);
//          }, 200);
//      }); 
        
//      $("input#sendcontent").blur(function(){
//          var h = $(window).height();
//          h = $(window)[0].scrollHeight;
//          $("div#content").append("<br> blur： " + h);
//      }); 
        
        $("span#sendspan").click(function(){ //點擊發送按鈕傳送訊息
            $("form#chat").submit();
        });
        
        $("form#chat").submit(function(){ //聊天內容傳送，在輸入框按下回車或者點擊發送按鈕觸發
            if (ws == null) {
                alert("連線斷開，重新重新整理頁面");
            } else {
                var msg = $("#sendcontent").val();
                if(msg.trim() === ""){
                    return false;
                }
                ws.send(msg);
                $("#sendcontent").val("");
                
            }
            return false;
        });
        
        function HTMLencode(content){ //將'<'、'>'等特殊符號轉為html字元實體
            var temp = document.createElement("div");
            $(temp).css("display", "none");
            $(temp).text(content);
            var res = temp.innerHTML
            $(temp).remove();
            return res;
        }
        
        
        $("textarea#sendcontent").keydown(function(event){ //textarea框回車提交，阻止換行
            if(event.keyCode == 13 && event.ctrlKey){
                $("textarea#sendcontent")[0].value += "\n";
            }else if(event.keyCode == 13){
                event.preventDefault();
                $("form#chat").submit();
            }
        });
        
    })
</script>
</head>

<body class="container" style="margin-top: 20px; margin-bottom: 20px;">
    <form id="chat" class="form-horizontal">
        <div id="content" class="well" style="height: 500px;">
            <div class="other_user">
<!--                <div class="name_time"> -->
<!--                    小新(11-30 20:54) -->
<!--                </div> -->
                <div class="triangle"></div>
                <div class="say">
                    你好嗎？
                </div>
            </div>
        </div>
        <div class="input-group">
            <textarea id="sendcontent" class="form-control" rows="1"></textarea>
<!--            <input type="text" id="sendcontent" class="form-control"/>  -->
            <span id="sendspan" class="input-group-addon">&crarr;</span>
        </div>
    </form>
    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">輸入暱稱加入聊天</h4>
          </div>
          <div class="modal-body">
            <form id="nickname_form" class="form-horizontal">
                <div class="input-group">
                    <input type="text" id="nickname" class="form-control" placeholder="暱稱"/> 
                    <span id="nickname_btn" class="input-group-addon">進入</span>
                </div>
            </form>
          </div>
        </div>
      </div>
    </div>

</body>
</html>

後臺：

import java.io.BufferedWriter;
import java.io.FileWriter;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.websocket.CloseReason;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.sun.org.apache.xml.internal.security.utils.Base64;

@ServerEndpoint("/ChatServer")
public class ChatServer {
    private static Map<Session, String> users = new HashMap<Session, String>();
    private static BufferedWriter record_w = null;
    @OnOpen
    public void onOpen(Session session) throws Exception {
        String nickname = session.getQueryString();
        nickname = new String(Base64.decode(nickname), "utf8");
        
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
websocket-chat:一個網頁聊天小程式

     
  
  
  
 頁面： 
 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE= 



  
 

    


    
    
java SpringBoot+webSocket聊天小程式 （複製程式碼即可用）

     
 
                1。後端程式碼

package test.conntroller.socket;

import java.util.HashMap;
import java.util.HashSet;
import java.util.Random;
import java.util.S 



  
 

    


    
    
用python一個融合gui的聊天小程式

     
 
							
							
							服務端： 
server：



-- coding:utf-8 --

from Tkinter import * 
import socket; 
import threading 
import time 
”’ 
這是一個聊天小程式 
”’

topWv 



  
 

    


    
    
正在載入的狀態表示 這是一個*毫無用處*的小程式

     
  
  
  
 /一個毫無用處的小程式/ loading. loading.. loading... 迴圈表示loading狀態 
 只為了皮一下XD 
 #include<windows.h>
#include<cstdlib>
#include<iostream>

 



  
 

    


    
    
UDP協議實現聊天小程式

     
  
 
 
   今天我們用之前講解過的UDP協議來寫一個最基礎，最簡單的網路聊天程式。 
 //我們通過udp協議來實現一個簡單的網路聊天程式
//這是客戶端的實現
//過程：
//    1.建立套接字
//    2.繫結地址資訊
//    3.向服務端傳送資料
//    4.接 



  
 

    


    
    
手把手教你構建一個音視訊小程式

     
 歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~ 
 
 本文由騰訊視訊雲終端團隊發表於雲+社群專欄 
 
騰訊雲提供了全套技術文件和原始碼來幫助您快速構建一個音視訊小程式，但是再好的原始碼和文件也有學習成本，為了儘快的能除錯起來，我們還提供了一個免費的一鍵部署服務：您只需輕點幾下滑鼠，就可以在自己 



  
 

    


    
    
青銅選手帶你動手擼一個部落格小程式給自己（可能是第二期）~（大佬請忽略此條）

     
 前言 
上一篇的的的連結 賴了一個星期了，let us 接著上一篇的搞。 
在上一篇裡搞了一下基礎設施建設，這一篇我們...稍微搞那麼一丟丟上層建築。 
這一篇裡本菜雞想分享的tip 
 
 小程式登陸邏輯與登陸狀態維持的兩種姿勢 
 傳送評論時的一個投機倒把的小“優化” 
 
小程式微信登陸與前端登陸狀態儲 



  
 

    


    
    
安卓 藍芽通訊之聊天小程式

     
  
 
 安卓 藍芽聊天小程式 
 一、簡述 
   記--簡單的藍芽聊天小程式。使用的是傳統藍芽開發。(某些手機由於Android版本原因需要新增新的許可權) 
        兩臺裝置開啟藍芽，一臺裝置設定藍芽可見性，另一臺裝置進行連線，然後互相收發資訊。 



  
 

    


    
    
一個phper做小程式的感想

     
 關於微信小程式，我也做了兩三個了，我想簡單總結下感想。 
 
  1.總體來說還是很簡單的  
  2.主要的工作和知識點有 
   
   2.1畫靜態頁面 
   2.2寫js，寫入互動和業務 
   2.3對接微信各種介面 
   2.4小程式的生命週期，跳轉，儲存等雜項 
    
  3.注意點 
 



  
 

    


    
    
定做一個微信小程式費用多少?

     
 
 
 定做一個微信小程式費用多少?微信小程式的推出，給各行業都帶來了便利，無論是線下轉化的快消行業還是對於線上品宣的企業，都在起著重要的作用，想通過小程式宣傳推廣的商家越來越多，以至於製作小程式的需求量逐漸增大，也就催生了很多小程式製作公司來佔領這一新型市場。
 小程式之所以這麼火，一方面是因為有微信強大資 



  
 

    


    
    
FAutoTest一個 H5、小程式自動化測試框架

     
  
 
 簡介 
 隨著產品業務形態逐漸從 App 延升到微信小程式、微信公眾號以及 QQ公眾號等，而之前的自動化建設主要是 Native App 為主，全手工測試已無法滿足快速增長的業務需求。為提升測試效率和質量，FAutoTest 框架致力於解決 QQ、微信內 UI 的自動化問題（包括微信內 H5頁面和小 



  
 

    


    
    
Netty+Websocket 實現一個簡易聊天室

     
  
 
 後臺程式碼 
 /**
 * 服務端
 */
public class ChatServer {

	public static void main(String[] args) throws Exception {
		int port=8080; //服務端預設埠
		new Ch 



  
 

    


    
    
開發一個微信小程式多少錢？

     
 
							
							
							
今天就KUK酷可科技,抽點時間和大家聊聊小程式的開發成本以及開發週期問題，希望能給一些對小程式感興趣的朋友們一些參考。
一般的小程式10天左右就可以搞定，具體開發成本請接著往下看。
小程式的優勢：
與 H5 相比，小程式的優勢幾乎是壓倒性的，幾乎與 App 相 



  
 

    


    
    
微信小程式——手把手教你寫一個微信小程式

     
 前言
　　微信小程式年前的跳一跳確實是火了一把，然後呢一直沒有時間去實踐專案，一直想搞但是工作上不需要所以，嗯嗯嗯嗯嗯emmmmm.....
需求
　　小程式語音識別，全景圖片觀看，登入授權，獲取個人基本資訊
一：基礎框架




跟著官方文件一步一步來，新建一個小程式專案就好
然後呢，畢竟預設的只是基本骨架 



  
 

    


    
    
構思一個重量級的小程式

     
 　　早在我大學的時候，我就曾經做過一個電影類的小程式，資料全部由豆瓣提供，功能比較單一，設計也很一般，連結如下：
　　
　　今天在部落格園瞎逛的時候，看到有一位博主做了個汽車銷量的小程式，由於本人也是個汽車愛好者，便毫不猶豫地點了進去。
　　在認真地把所有功能都用了一遍之後，開發一個融入自己很多想法的汽車類小 



  
 

    


    
    
樹莓派跑一個簡單c++小程式教程

     
  
 
 我用的是樹莓派3代b型，所使用的是Debian系統的衍生系統raspbian(對系統不太瞭解不清楚)。樹莓派開發c++程式需要的工具有編輯器vim,偵錯程式gdb,編譯器gcc或者g++.（大神飄過就行~~ 記錄一下）用紅筆塗得地方是我命令敲錯的地方，大家忽略就行。
 安裝vim   執行 



  
 

    


    
    
Linux環境下的一個進度條小程式

     
 
                描述：

1.進度條原理：第一次列印一個字元，例如”#”，然後使游標定位到本行首，覆蓋之前列印的字串，第二次列印”##”，覆蓋之前列印的字串，重複上述操作，直到列印100個字元。

2.fflush（stdout）： fflush(stdout)重新整理標準輸出緩衝區，把輸出 



  
 

    


    
    
動手擼一個微信小程式學生課程表頁面

     
 
							
							
							



分解

仔細看完課程表頁面，我們可以把頁面分解： 
1. 頂部一欄:週一到週日。 
2. 左側一欄:第1-12節課。 
3. 中間部分灰色虛線和午休的紅線。 
4. 遍歷具體課程，並繪製。



開始寫程式碼



頂部：

使用wx的for迴圈



 



  
 

    


    
    
用Python來寫一個男女相親小程式|碼農的情人節

     
  
 
  
  碼農這個群體，高學歷，高工資，高智商，但是不善於交流，圈子也很小，相信很多小夥伴或者周圍的小夥伴，都有相親的經歷，或者被父母逼去相親的經歷，一般都是問年齡，你要找什麼樣的，有的還特講究生肖匹配，記得網上有一個段子，說男的20-60歲都只喜歡一種型別的女孩，而20歲到60歲的女孩相親需求卻不斷 



  
 

    


    
    
控制反轉IOC的依賴注入方式 【調侃】IOC前世今生 IoC模式 談談對Spring IOC的理解 一個簡單的小程式演示Unity的三種依賴注入方式  小菜學習設計模式（五）—控制反轉（Ioc） IoC模式（依賴、依賴倒置、依賴注入、控制反轉） IoC模式

     
 轉自：https://www.cnblogs.com/ysyn/p/5563256.html 
 
  
  引言： 
   　　專案中遇到關於IOC的一些內容，因為和正常的邏輯程式碼比較起來，IOC有點反常。因此本文記錄IOC的一些基礎知識，並附有相應的簡單例項，而在實際專案中再複雜的應用也只是在