前端原生index.html成功连接socket.io

socket.io官网
首先socket.io和websocket不能通用，是两个东西。这篇文章讲socket.io
socket.io的例子前端用index.html展示，服务器用node.js搭建，这个在官网写得很清楚。是比较容易实现的。

下面这个index.html是用的项目中较标准的格式。

<script src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8">
    var socket =  io('http://122.1.9.29:5000/socket/detail',{'transports': ['websocket']})
    socket.emit('satellite', {data: 'satellite'});
    socket.on('response', function(data) {
       console.log(data,'data......')
    });
</script>

解释：

1.io('接口地址',配置)，'transports': ['websocket']：因为接口是http，要告诉浏览器要以ws接口处理才可以成功。

2.socket.emit('message', 数据)，message：这是跟后台定好的字段，前端以'message'标识给他传数据，后台也有一个以'message'命名的函数来接收处理前端数据。

3.socket.on('response', function(数据) {})，response：这是跟后台定好的字段，后台处理好数据以'response'为标识返回数据，前端会在‘response’函数里处理后台的数据

服务器：

//接收前端message的数据
@socketio.on('message', namespace='/socket/detail')
def message(msg):
   //msg就是前端传过来的数据
    emit('response', msg)
//用response把msg再传回去