websocket简单聊天室

523

websocket是一种新的网络通信协议,2008年诞生,2011年成为标准,几乎所有浏览器都已经支持了。websocket的出现主要就是解决HTTP协议的缺陷,只能由客户端发起。websocket是一种在单个TCP连接上实现全双工通信。

在websocket之前,我们有好几个旁门左道的方法实现客户端和服务端长连接:

轮询:设置定时器,每隔多长时间就请求一次,或者没次请求响应的方法里面马上发起请求。两个方法都有很大的缺点,耗时耗性能,还容易出问题。

iframe方法:

iframe的src属性采用的是get方法,我们使用iframe方式去实现长连接,服务端就不能断开,也就是不能end,使页面一值在加载的状态。

EventSource流,这个方法其实我是没听过,听说兼容性和性能也很不好。

直到websocket出来之后,客户端和服务端建立长连接变得简单而且性能好。支持双向通信,数据头部小,还能跨域。兼容性也没什么太大问题。注意,websocket虽然借助http,但是两者是有很大差别的。

socket.io,是对websocket的封装,不仅是客户端,服务端也实现了。如果,有人真的用了很古老的浏览器不支持websocket,socket.io会通过可以支持的方法,其实就是轮询或者iframe等去实现。

今天分享一个聊天室的demo,没太多关于API的东西。

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的通信。