websocket简单聊天室

wade

发布于 2020-04-24 10:09:11

7900

发布于 2020-04-24 10:09:11

文章被收录于专栏：coding个人笔记coding个人笔记

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，然后可以开始聊天了：