websocket簡單聊天室

時間 2019-11-08

標籤 websocket 簡單聊天室简体版

原文原文鏈接

websocket是一種新的網絡通訊協議，2008年誕生，2011年成爲標準，幾乎全部瀏覽器都已經支持了。websocket的出現主要就是解決HTTP協議的缺陷，只能由客戶端發起。websocket是一種在單個TCP鏈接上實現全雙工通訊。css

在websocket以前，咱們有好幾個旁門左道的方法實現客戶端和服務端長鏈接：html

輪詢：設置定時器，每隔多長時間就請求一次，或者沒次請求響應的方法裏面立刻發起請求。兩個方法都有很大的缺點，耗時耗性能，還容易出問題。node

iframe方法：web

iframe的src屬性採用的是get方法，咱們使用iframe方式去實現長鏈接，服務端就不能斷開，也就是不能end，使頁面一值在加載的狀態。npm

EventSource流，這個方法其實我是沒聽過，據說兼容性和性能也很很差。跨域

直到websocket出來以後，客戶端和服務端創建長鏈接變得簡單並且性能好。支持雙向通訊，數據頭部小，還能跨域。兼容性也沒什麼太大問題。注意，websocket雖然藉助http，可是二者是有很大差異的。瀏覽器

socket.io，是對websocket的封裝，不只是客戶端，服務端也實現了。若是，有人真的用了很古老的瀏覽器不支持websocket，socket.io會經過能夠支持的方法，其實就是輪詢或者iframe等去實現。bash

今天分享一個聊天室的demo，沒太多關於API的東西。websocket

npm init -y初始化網絡

npm install socket.io -D安裝依賴

建立server.js：

const http= require('http');

const server= http.createServer(function(req, res){});

const io = require('socket.io')(server);

io.of('/').on('connection',function(socket){

  socket.on('clinetmsg',function(msg){

    io.sockets.emit('servermsg', `${msg.name}：${msg.msg}`);

    console.log(msg)

  });

});

server.listen(3000);
複製代碼

而後建立兩個html，爲了區分，兩個html只是名字不一樣：

<body>

<input type="text" id="client">

<button onclick="send()">發送</button>

<ul style="list-style: none" id="msgList"></ul>

<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>

<script>

  const socket= io.connect('http://192.168.164.31:3000');

  socket.on('servermsg',(data)=>{

    var node = document.createElement("li");

    var textnode = document.createTextNode(data);

    node.appendChild(textnode);

    document.getElementById("msgList").appendChild(node);

  });

  function send() {

    var msg = document.getElementById('client').value;

    socket.emit('clinetmsg', {name: 'Tom', msg: msg});

  }

</script>

</body>
複製代碼

啓動服務端：node server.js，而後能夠開始聊天了：

很簡單的聊天室demo，須要注意的也就只是兩個端emit的名字和on的名字須要對應。固然，真正的聊天室很是複雜，無論是樣式仍是後臺邏輯都很複雜，這邊只是實現websocket的通訊。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。